logo标签列表

将表格HTML转换为JSON

javascripthtmljsonhtml-table
4
目前 GitHub 脚本给你什么结果？ - markasoftware
1
可能最简单的方法是将其转换为对象并使用 JSON.stringify。这些数据似乎不是表格形式的，还有其他内容吗？ - RobG
你愿意把数据放到列里面而不是行里面吗？ - markasoftware
@Markasoftware 问题在于我收到了HTML表格格式。 - cnavarreteliz
http://jsfiddle.net/Crw2C/774/ - Jack
显示剩余3条评论
4个回答
8
你可以通过先将原始表格转换为对象，然后使用JSON.stringify将其转换为所需的字符串格式来实现转换：
<table id="t0">
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>

<script>

function tableToJSON(table) {
  var obj = {};
  var row, rows = table.rows;
  for (var i=0, iLen=rows.length; i<iLen; i++) {
    row = rows[i];
    obj[row.cells[0].textContent] = row.cells[1].textContent
  }
  return JSON.stringify(obj);
}

console.log(tableToJSON(document.getElementById('t0'))); // {"Name:":"Carlos","Age:":"22"}"

</script>

然而，那只是一种特别情况下的解决方案，因此需要进行一些工作以适应更一般的情况。但它展示了这个概念。

请注意，并不能保证对象属性会按照它们在表格中出现的顺序返回，你可能会得到{"Age:":"22","Name:":"Carlos"}这样的结果。

6
假设您只需要获取每行的第一个/第二个单元格作为键/值对，您可以使用 .reduce() 迭代行，并仅抓取 .cells[0] 和 .cells[1] 的文本内容作为每个键/值对： 

var t = document.querySelector("table");

var j = [].reduce.call(t.rows, function(res, row) {
    res[row.cells[0].textContent.slice(0,-1)] = row.cells[1].textContent;
    return res
}, {});

document.querySelector("pre").textContent = JSON.stringify(j, null, 2);
<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>
<pre></pre>

Array.prototype.reduce方法接受一个集合并使用累加器将其减少到所需的任何状态。这里我们只是将其减少为一个对象，因此在回调之后传入一个对象。
对于每一行，我们使用第一个单元格的内容作为对象键，第二个单元格的内容作为值。然后我们从回调中返回对象，以便在下一次迭代中将其返回给我们。
最后，.reduce()返回我们返回的最后一件事情（当然是我们开始的对象），这就是你的结果。
我总是对将宿主对象传递给内置方法作为this感到紧张。这应该没问题，但IE8会抛出一个错误（在这里无关紧要，因为reduce需要一个polyfill）。可能还有其他浏览器也会这样做。 - RobG
@RobG：这是一个值得考虑的观点。正如你所说，IE8不支持.reduce()，而polyfill则不会有任何问题。至于其他浏览器（如果存在），它们将落在那个不太受人关注的支持范围内。但你的答案也是一个好方法（而且更快），所以+1。此外，还要使用.rows和.cells，这些很少有人使用。 - user1106925
2

var t = document.querySelector("table");

var j = [].reduce.call(t.rows, function(res, row) {
    res[row.cells[0].textContent.slice(0,-1)] = row.cells[1].textContent;
    return res
}, {});

document.querySelector("pre").textContent = JSON.stringify(j);
<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>
<pre></pre>

完美解决方案 - Bhart Supriya
-1

你所使用的Table-to-JSON库期望表格的格式不同。

它期望第一行是所有标题，之后是数据行。

换句话说，它期望你的表格结构应该像这样。

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>        
    <tr>
        <td>Carlos</td>
        <td>22</td>
    </tr>
</table>

这里是一个你的JSFiddle的分支版本，在这个版本中它可以工作。

他在评论中说他做不到这一点，他正在从另一个来源获取表格。 - markasoftware
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接