使用jQuery遍历HTML表格，将表格中的数据转换成JSON

Posted 2023-03-05

【中文标题】使用jQuery遍历HTML表格，将表格中的数据转换成JSON

【英文标题】：Iterate through HTML table using jQuery, converting the data in the table into JSON

【发布时间】：2010-12-24 18:08:01

【问题描述】：

我遇到了一个必须将 html 表格数据转换为 JSON 的案例。在这个过程中，我必须遍历表并将一个一个（行）转换为一个数组，然后将整个数组转换为 JSON。如何遍历表格（每一行和每一列）？

【问题讨论】：

convert table into a JSON object in jQuery的可能重复

【参考方案1】：

这样的？ 将每个 td 的内容提取到 myTable[rowIx][tableIx] 数组中。

var myTable = [];
$('#myTable tr').each(function (i, tr) 
    var myTr = [];

    $('td', tr).each(function(j, td) 
        myTr.push($(td).html());
    );

    myTable.push(myTr);
);

【讨论】：

谢谢。我自己也在寻找类似的东西

【参考方案2】：

您还需要将 javascript 数组（也适用于对象、字符串等）转换为 JSON 序列化字符串。

将此添加到您的页面（即将添加到 jQuery）：

<script type="text/javascript" src="http://json.org/json2.js"></script>

然后序列化你的数组：

JSON.stringify(myTable)

【参考方案3】：

首先正如 fredrik 指出的，我们需要包含 https://github.com/douglascrockford/JSON-js。

其次，我们可以使用jQuery.fn.map 和jQuery.fn.get 创建一个数组数组（tr:s），其中包含jQuery.fn.text 元素的jQuery.fn.text 内容：

var AoA = $('table tr').map(function()
    return [
        $('td',this).map(function()
            return $(this).text();
        ).get()
    ];
).get();
var json = JSON.stringify(AoA);