Html表到json数组
我有动态行和列的表，我试图通过循环每个tr和td并在文本框中查找值但是没有运气将HTML表转换为Json。这是我的js代码。
$("#btn_Table2Json").click(function () { var rows = []; $('table.dynatable tbody tr').each(function (i, n) { var $row = $(n); if (n.className.toUpperCase() != "Prototype".toUpperCase() && n.className.toUpperCase() != "Header".toUpperCase()) { $('table.dynatable tbody td').each(function (j, d) { rows.push({ //Here id,Name,Address,Contact are dynamic.so need to find it inside of 'th' of table. //but i am not being able to find it, so i just hard coded it :( Id: $row.find('td:eq(0)').text(), Name: $row.find('td:eq(1)').text(), Address: $row.find('td:eq(2)').text(), Contact: $row.find('td:eq(2)').text() }); }); } }); //debugger; alert(JSON.stringify(rows)); //alert(table.toString()); });
对于上表，JSON输出应该是：
[{ID:"1",Name:"Bibek",Address:"lubhoo",Contact:"98411"},{ID:"4",Name:"Suraj",Address:"Sanagaun",Contact:"984511"}]
我的Html是（列和行是动态的）
ID Remove Name Remove Address Remove Contact Remove Remove<!---->
基本解决方案 – 演示
因为您使用的是实际输入字段，所以您真正需要做的就是将其包装在表单中。 将它作为表单后，可以使用jQuery选择它并调用serializeArray()来创建输入的名称 – 值数组。
var table = $('#my_form').serializeArray(); console.log(table); alert(JSON.stringify(table));
结果不会像你想要的那样100％。 如您所见，所有输入都是有序的，但是没有一种真正可靠的方法来了解行之间的差异。 另外，我认为订单不保证。
[{"name":"id[]","value":"1"}, {"name":"name[]","value":"Billy"}, {"name":"col4[]","value":"Home"}, {"name":"col3[]","value":"Phone"}, {"name":"id[]","value":"2"}, {"name":"name[]","value":"Bob"}, {"name":"col4[]","value":"work"}, {"name":"col3[]","value":"Cell"}]
保持行分组 – 演示
如果您编辑命名数组以获得行号，那么您将能够知道哪些值属于一起。 例如，如果您有两行，则输入名称将如下所示：
（注意名称数组中有行号），返回的结果如下所示：
[{"name":"id[0]","value":"1"}, {"name":"name[0]","value":"Billy"}, {"name":"col4[0]","value":"Home"}, {"name":"col3[0]","value":"Phone"}, {"name":"id[1]","value":"2"}, {"name":"name[1]","value":"Bob"}, {"name":"col4[1]","value":"work"}, {"name":"col3[1]","value":"Cell"}]
按摩结果到所需的输出 – 演示
显然，结果仍然与您所寻找的不匹配，但也可以修复。 我们知道该字段的名称，我们知道该字段的值，现在我们也知道它的行号。 使用一些正则表达式，我们可以从行号中分离出名称。 使用循环我们可以将事物移动到我们喜欢的格式：
var table = $('#my_form').serializeArray(); var final_results = []; var row_patt = /\[(\d+)\]$/; // Gets the row number inside [] var name_patt = /^[^\[]+/; // Gets the name without the [0] $(table).each( function(index, ele){ // Get the name of input and row number var rowNum = parseInt(row_patt.exec(ele.name)[1]); var name = name_patt.exec(ele.name); // Add the name and value to the correct spot in results if( final_results[rowNum] === undefined ){ final_results[rowNum] = {}; } final_results[rowNum][name] = ele.value; });
现在我们有一个格式良好的哈希数组，列出每行的每个值：
[{"id":"1","name":"Billy","col4":"Home","col3":"Phone"}, {"id":"2","name":"Bob", "col4":"work","col3":"Cell"}]
试试这个
$('table.dynatable tr').each(function(){ rows.push({ Id: $(this).find('td:eq(1) input').val(), Name: $(this).find('td:eq(2) input').val(), Address: $(this).find('td:eq(3) input').val(), Contact: $(this).find('td:eq(4) input').val() }); });
DEMO
有一个库将表转换为json格式：link： https ： //github.com/lightswitch05/table-to-json