在 jQuery 中将 HTML 表格数据转换为 JSON 对象

Posted 2023-03-05

【中文标题】在 jQuery 中将 HTML 表格数据转换为 JSON 对象

【英文标题】：Convert a HTML table data into a JSON object in jQuery

【发布时间】：2011-01-15 10:47:13

【问题描述】：

有谁知道如何将 html 值表转换成一个漂亮的 JSON 对象，以便用 jQuery 进行操作？

【问题讨论】：

“表”是什么意思？数据库表？ HTML 表格？

Iterate through html table using jQuery, converting the data in the table into JSON的可能重复

【参考方案1】：

HTML 表格？比如，二维数组中的所有<td> 内容？

var tbl = $('table#whatever tr').map(function() 
  return $(this).find('td').map(function() 
    return $(this).html();
  ).get();
).get();

然后只需使用 $.json（或您想要的任何库）将其转换为 JSON 字符串。

edit — 重写为使用数组原型中的原生 (shim here) .map()：

var tbl = $('table#whatever tr').get().map(function(row) 
  return $(row).find('td').get().map(function(cell) 
    return $(cell).html();
  );
);

jQuery .map() 函数具有将返回的数组展平到结果数组中的“功能”。也就是说，如果回调函数返回的值本身就是一个数组，那么返回的数组不会成为 .map() 结果的 one 单元格的值，而是将它的每个元素都添加到结果中.

它可能可以使用原始的 jQuery 版本并在返回值周围包装一个额外的数组。

【讨论】：

这里的玩笑可能是这并没有真正起作用。 jQuery .map() 方法具有（如果你问我的话，这很值得怀疑）扁平化返回数组的特性。但是，这种基本方法适用于较新的 javascript 环境通过 Array 原型提供的原生 .map()。

很有帮助！！ BTW @Pointy，如果非常 TD 有一个类，例如

bah bah bah...，我可以将它转换为 json，所以类名变成了这样的属性名==>“消息”：“呸呸呸……”，非常感谢

@VirtualJasper 是的，您当然可以这样做，但是您需要为每个单元格构造一个对象。我会问一个新问题。

【参考方案2】：

你的意思是以下情况吗？

给定：

A1 B1 C1 ...
A2 B2 C2 ...
...

需要：

"1": ["A1", "B1", "C1", ...], 
 "2": ["A2", "B2", "C2", ...], ...

所以使用下面的函数创建一个有效的 JSON-String 函数，不带尾随“，”：

function html2json() 
   var json = '';
   var otArr = [];
   var tbl2 = $('#dest_table tr').each(function(i)         
      x = $(this).children();
      var itArr = [];
      x.each(function() 
         itArr.push('"' + $(this).text() + '"');
      );
      otArr.push('"' + i + '": [' + itArr.join(',') + ']');
   )
   json += otArr.join(",") + ''

   return json;

【讨论】：

这个问题已经 3 年了，并且有一个公认的答案，哈哈，你为什么要回答这个问题？

嗯，很多人会遇到和 OP 一样的问题。 @John 的回答可能会为他们提供额外的解决方案

好镜头，太棒了。

【参考方案3】：

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

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

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

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

这是一个实际的演示：

http://jsfiddle.net/Crw2C/173/

【讨论】：

不好的是，如果单元格内有html标签，会被替换为空字符串。

@JerryLiang 有一个选项allowHTML 可以保留 HTML 标签

@lightswitch05 in your jsfiddle if table contains dropdown than how to get only selected value in json ...(在我的情况下，senario和你说的一样，你的小提琴也很好，但在我的桌子上更多State(dropdown) 列比 json 中的所有数据为 dropdown.plz 帮助我...谢谢）

Ghanshyam，不要用这个工具来提取表单数据，使用标准表单