将表格HTML转换为JSON

Question

我有这个：

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

而且我需要JSON格式。

{"Name":"Carlos","Age": 22}

我已经尝试过https://github.com/lightswitch05/table-to-json，但是它不适用于每一行的标题:(

编辑： http : //jsfiddle.net/Crw2C/773/

Answer 1

假设您只需要获取每行的第一/第二个单元格作为键/值对，则可以使用.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()返回我们返回的最后一件事（这当然是我们开始的对象），这就是您的结果。

Answer 2

您可以先将OP中的表转换为所需的格式，方法是先将其转换为Object，然后使用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"} 。

Answer 3

 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> 

Answer 4

您正在使用的Table-to-JSON库在表中期望使用不同的格式。

期望有一个表，其中所有标头都位于第一行，随后是数据。

换句话说，期望您的表的结构如下

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

这是在其中工作的JSFiddle的分叉版本 。