将表数据转换为JSON

我试图将HTML表中的数据转换为JSON，以便可以在服务器端相应地处理它。 我能够序列化数据，但结果充其量只能生成不直接链接的不同数据数组。 喜欢：这是我使用的forms：

 
 
 
Name
 
Gender
 
 
 
 
  male female  
 
 
 
 
  male female  
 
 
   

序列化数据的脚本是：

 $("#nameGenderForm").submit(function(event){ event.preventDefault(); var rawData=$('#nameGenderForm').serializeFormJSON(); var formData=JSON.stringify(rawData); console.log(formData); }); 

serializeFormJSON（）是我在浏览几页StackOverFlow后得到的：

 (function($) { $.fn.serializeFormJSON = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; })(jQuery); 

通过使用所有这些，我能够获得这样的JSON：

 {"studentName":["kenpachi","orihime"],"studentGender":["male","female"]} 

我尝试了许多方法来使它们以名称 – 性别格式获得，但每种方式都会产生相同的结果。 两个不同的数组。 使用每种forms也没有帮助。 有没有办法在name-gender数组中获取数据，如下所示：

 {"studentName":"kenpachi","studentGender":"male"},{"studentName":"orihime","studentGender":"female"} 

请指教。

Answer 1

在这里你进行演示 ，稍作修改如下：

循环遍历每个表行，找到输入，textarea和选择类型元素，序列化它们，转换为对象然后推送到数组。

  var o = []; $(this).find('tr').each(function() { var $this = $(this); var $elements = $this.find('input, textarea, select') if ($elements.size() > 0) { var serialized = $elements.serialize(); var item = $.toDictionary( serialized ); o.push(item); } }); 

PS为名为toDictionary的 jquery库添加了一个新函数，因此请确保在代码中也包含该函数。

$ .toDictionary函数

 (function($) { $.extend({ toDictionary: function(query) { var parms = {}; var items = query.split("&"); // split for (var i = 0; i < items.length; i++) { var values = items[i].split("="); var key = decodeURIComponent(values.shift()); var value = values.join("=") parms[key] = decodeURIComponent(value); } return (parms); } }) })(jQuery); 

Answer 2

给它们相同的名称，但作为一个数组

例如

 name="first[studentName]" and name="first[studentGender]" 

那么你的第二个输入

 name="second[studentName]" and name="second[studentGender]" 

此外，也许serializeArray会有所帮助。

Answer 3

我会做这样的事情jsFiddle – 也就是说，循环遍历每一行并从输入中收集数据，然后将每个对象推送到结果数组中。

您可能希望在输入上使用class ，因为它可能比通过当前非常繁琐的:input[name=xyz]选择器查找更快。

Answer 4

  function tableToArray(table) { var headers = []; var data = []; // first row needs to be headers var headers = []; for (var i = 0; i < table.rows[0].cells.length; i++) { headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, ''); } // go through cells for (var i = 1; i < table.rows.length; i++) { var tableRow = table.rows[i]; var rowData = {}; for (var j = 0; j < tableRow.cells.length; j++) { rowData[headers[j]] = tableRow.cells[j].innerHTML; } data.push(rowData); } return data; } function tableToJson(table) { var headers = []; var data = '{['; for (var i = 0; i < table.rows[0].cells.length; i++) { headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, ''); } for (var i = 1; i < table.rows.length; i++) { var tableRow = table.rows[i]; var rowData = {}; for (var j = 0; j < tableRow.cells.length; j++) { rowData[headers[j]] = tableRow.cells[j].innerHTML; } data = (data + JSON.stringify(rowData) + ","); } return data.slice(0, -1) + "]}"; }