如何使用javascript将下表转换为JSON？

IT技术 javascript jquery json
2021-03-04 18:33:28

如何在jquery/javascript中将下表变成JSON字符串？

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>

我想这样做，以便我可以在变量“myjson”中获取一个 JSON 字符串，该字符串可用于 POST 请求或 GET 请求：

{
  "myrows" : [
    {
      "Column 1" : "A1",
      "Column 2" : "A2",
      "Column 3" : "A3"
    },
    {
      "Column 1" : "B1",
      "Column 2" : "B2",
      "Column 3" : "B3"
    },
    {
      "Column 1" : "C1",
      "Column 2" : "C2",
      "Column 3" : "C3"
    }
  ]
}

实现这一目标的最佳方法是什么？（注意：可能有不同数量的行，我只想提取文本而忽略表格内的其他标签）

6个回答

更新：jsFiddle 上的解决方案（如下）有一个稍微改进的分支。

你只需要遍历你的表的 DOM 读取它......这甚至不接近优化，但会给你你想要的结果。( jsFiddle )

// Loop through grabbing everything
var myRows = [];
var $headers = $("th");
var $rows = $("tbody tr").each(function(index) {
  $cells = $(this).find("td");
  myRows[index] = {};
  $cells.each(function(cellIndex) {
    myRows[index][$($headers[cellIndex]).html()] = $(this).html();
  });    
});

// Let's put this in the object like you want and convert to JSON (Note: jQuery will also do this for you on the Ajax request)
var myObj = {};
myObj.myrows = myRows;
alert(JSON.stringify(myObj));​

和输出...

{"myrows":[{"Column 1":"A1","Column 2":"A2","Column 3":"A3"},{"Column 1":"B1","Column 2":"B2","Column 3":"B3"},{"Column 1":"C1","Column 2":"C2","Column 3":"C3"}]}
这里唯一的“问题”是您在每一行都获得标题值。你可以缓存它。
2021-04-21 18:33:28
是的，这就是我提到它没有优化的原因之一。我会为此稍微修改一下。
2021-04-26 18:33:28

除了能够忽略列、覆盖值和不被嵌套表混淆之外，我需要同样的东西。我最终编写了一个 jQuery 插件 table-to-json：

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

您所要做的就是使用 jQuery 选择您的表并调用插件：

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

这是它的实际演示：

http://jsfiddle.net/nyg4z/27/

我的版本：

var $table = $("table"),
    rows = [],
    header = [];

$table.find("thead th").each(function () {
    header.push($(this).html());
});

$table.find("tbody tr").each(function () {
    var row = {};

    $(this).find("td").each(function (i) {
        var key = header[i],
            value = $(this).html();

        row[key] = value;
    });

    rows.push(row);
});

见小提琴。

谢谢！！！它对我有很大帮助，因为您与 $table 分开，这在我的情况下是必要的，因为我正在解析由 wordpress 生成的一串 html（不要问我为什么 ¬¬）
2021-04-27 18:33:28

这是一个没有 jQuery 的解决方案，灵感来自这篇文章：

function tableToJson(table) { 
    var data = [];
    for (var i=1; i<table.rows.length; i++) { 
        var tableRow = table.rows[i]; 
        var rowData = []; 
        for (var j=0; j<tableRow.cells.length; j++) { 
            rowData.push(tableRow.cells[j].innerHTML);; 
        } 
        data.push(rowData); 
    } 
    return data; 
}

试试这个。

var myRows = { myRows: [] };

var $th = $('table th');
$('table tbody tr').each(function(i, tr){
    var obj = {}, $tds = $(tr).find('td');
    $th.each(function(index, th){
        obj[$(th).text()] = $tds.eq(index).text();
    });
    myRows.myRows.push(obj);
});
alert(JSON.stringify(myRows));

工作演示 - http://jsfiddle.net/u7nKF/1/

其它你可能感兴趣的问题
上一篇如何： ~ 操作符？ 下一篇在 d3 中，如何从 SVG 线获取插值线数据？