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

Posted

技术标签:

【中文标题】使用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);

【讨论】:

以上是关于使用jQuery遍历HTML表格,将表格中的数据转换成JSON的主要内容,如果未能解决你的问题,请参考以下文章