从HTML表格创建JSON数组

Question

我有一个将日志文件导出为HTML表格的C++程序，我想知道是否有任何方法可以解析该表格（类似于这样）：

<table>
<tr><td>id</td><td>value1</td><td>value2</td></tr>
<tr><td>0 </td><td>0     </td><td>0     </td></tr>
<tr><td>0 </td><td>1.5   </td><td>2.15  </td></tr>
</table>

使用Javascript函数将其转换为JSON数组（类似于以下内容）：

 var chartData = [
            {id:"0",value1:"0",value2:"0"},
            {id:"1",value1:"1.5",value2:"2.15"}];

问题在于我希望这个函数能够适用于给定的任何表格，无论行列数如何（第一行始终为标题）。

- Ali1S232

---

chartData 是一个普通的 JavaScript 数组，不是 JSON（今天一定出了什么问题，这么多人都搞混了）。 - Felix Kling

无论如何，我怎样才能将表格中的数据提取到数组中？ - Ali1S232

如果你会使用jQuery，这应该是一项简单的工作。 - morgar

有趣的挑战是在没有jQuery的情况下完成...被接受了！ - mVChr

Answer 1

这是我的实现方式：

var tableToObj = function( table ) {
    var trs = table.rows,
        trl = trs.length,
        i = 0,
        j = 0,
        keys = [],
        obj, ret = [];

    for (; i < trl; i++) {
        if (i == 0) {
            for (; j < trs[i].children.length; j++) {
                keys.push(trs[i].children[j].innerHTML);
            }
        } else {
            obj = {};
            for (j = 0; j < trs[i].children.length; j++) {
                obj[keys[j]] = trs[i].children[j].innerHTML;
            }
            ret.push(obj);
        }
    }

    return ret;
};

你可以这样调用它：

var obj = tableToObj( document.getElementsByTagName('table')[0] ); // or
var obj = tableToObj( document.getElementById('myTable') );

查看工作示例 →

- mVChr

Answer 2

假设第一行总是标题（可以更改以使其更具灵活性），类似于这样的内容：

function getData(table, format) {
    var rows = table.tBodies[0].rows,
        header_row = rows[0],
        result = [],
        header = [],
        format = format || function(val){return val;},
        i, j, cell, row, row_data;

    // extract header
    for(i = 0, l = header_row.cells.length; i < l; i++) {
        cell = header_row.cells[i];
        header.push((cell.textContent || cell.innerText));
    }

    // extract values
    for(i = 1, l = rows.length; i < l; i++) {
        row = rows[i];
        row_data = {};
        for(j = 0, l = row.cells.length; j < l; j++) {
            cell = row.cells[j];
            row_data[header[j]] = format(i, j, cell.textContent || cell.innerText);
        }
        result.push(row_data);
    }
    return result;
}

使用方法为：

var chartData = getData(referenceToTable, function(rowIndex, colIndex, value) {
    return +value; // shortcut to format text to a number
});

通过传递格式函数，您可以将每个单元格的值格式化为正确的数据类型。

演示

它的工作原理是基于只有一个元素的假设。您需要根据自己的需求进行调整。

- Felix Kling

---

我不得不更改这行代码: "row_data[header[j]] = format(i, j, cell.textContent || cell.innerText)" 为: "row_data[header[j]] = format(cell.textContent || cell.innerText)" 才能使其正常工作。 - Jean-Philippe Martin

@Jean-Philippe：你的格式化函数接受多少个参数？如果你想按原样使用代码，必须是三个。 - Felix Kling

Answer 3

我需要一个类似的东西，但是可以忽略列，覆盖值，并且不会被嵌套表所困扰。最终我编写了一个jQuery插件table-to-json：

https://github.com/lightswitch05/table-to-json

您只需使用jQuery选择您的表格并调用插件即可：

var table = $('#example-table').tableToJSON();

以下是使用您的数据演示其操作的示例：

http://jsfiddle.net/dGPks/199/

- lightswitch05

Answer 4

你可以使用jQuery框架来完成它。

<sript src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
  var chartData = [];
  $("table tr").each(function(i){
    if(i==0) return;
    var id = $.trim($(this).find("td").eq(0).html());
    var value1 = $.trim($(this).find("td").eq(1).html());
    var value2 = $.trim($(this).find("td").eq(2).html());
    chartData.push({id: id, value1: value1, value2: value2});
  });
//now you have the chartData array filled
});
</script>

干杯。

- Edgar Villegas Alvarado

Answer 5

由于该表格格式看起来像是格式良好的XML，我建议使用XSLT进行转换；然后您的C++程序可以调用XSLT引擎。

- Jacob