将表格 HTML 字符串转换为 JSON答案

【问题标题】：Convert a table HTML String to JSON将表格 HTML 字符串转换为 JSON
【发布时间】：2017-03-28 23:29:35
【问题描述】：

我正在使用this table to JSON 库，它将 HTML 表从其 ID 解析为 JSON（在此示例中为 #testtable）：

var table = $('#testtable').tableToJSON();
alert(JSON.stringify(table));

但我想从字符串中解析表格。像这样：

var table = $('<table id="example-table"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th data-override="Score">Points</th></tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td data-override="disqualified">50</td></tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td></tr> <tr> <td>John</td> <td>Doe</td> <td>80</td></tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td></tr> </tbody> </table>').tableToJSON();

我该怎么做？

【问题讨论】：

标签： javascript jquery json html-table

【解决方案1】：

插件可以选择ignoreHiddenRows。只需将其设置为 false：

var table = $('<table>...</table>').tableToJSON({ignoreHiddenRows: false});

演示：

var table = $('<table id="example-table"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th data-override="Score">Points</th></tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td data-override="disqualified">50</td></tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td></tr> <tr> <td>John</td> <td>Doe</td> <td>80</td></tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td></tr> </tbody> </table>').tableToJSON({ignoreHiddenRows: false});

alert(JSON.stringify(table));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/lightswitch05/table-to-json/master/src/jquery.tabletojson.js"></script>

【讨论】：

【解决方案2】：

似乎插件希望表格既在 DOM 中又可见（我在隐藏容器中尝试过）。

您可以创建一个屏幕外容器来附加然后运行插件：

<div id="hidden-div" style="position:absolute; top:-999em; left:-999em"></div>

$(function() {
  var $table = $('<table id="example-table"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th data-override="Score">Points</th></tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td data-override="disqualified">50</td></tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td></tr> <tr> <td>John</td> <td>Doe</td> <td>80</td></tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td></tr> </tbody> </table>')
  $('#hidden-div').append($table);
  var table = $table.tableToJSON();
  console.log(table);
});

然后移除屏幕外元素：

$('#hidden-div').remove()

DEMO

【讨论】：