javascript - 使用 javascript/jquery 将 HTML 表格数据转换为 JSON

Question

当我单击“+”按钮时，我的表格行正在动态生成。当我填充字段并单击提交按钮(“+”旁边)时，我的 JSON 将显示到控制台，如下图所示。

当我生成 JSON 时，我想排除未填充的行(在本例中为第 3 行)。另外，我想排除第 1 列(由 3 个按钮组成)。

正如我们所看到的，JSON 数据包含许多令人讨厌的“\n”和\t”。

我引用了一些 Stack Overflow 页面编写了以下代码。

function createJSON(){

 var myJSON = { Key: [] };

 var headers = $('table th');
 $('table tbody tr').each(function(i, tr){
   var obj = {}, 

   $tds = $(tr).find('td');

   headers.each(function(index, headers){
     obj[$(headers).text()] = $tds.eq(index).text();
   });

   myJSON.Key.push(obj);
 });

 console.log(JSON.stringify(myJSON));

}

Answer 1

未填充的行有 ​​<input>元素。您可以使用排除它们的选择器。

$('table tbody tr:not(:has(input))').each(...)

您可以使用 .trim() 去除标题周围的所有换行符和其他空白字符:

headers.each(function(index, headers){
    obj[$(headers).text().trim()] = $tds.eq(index).text();
});

要跳过第一列，您可以使用 :gt(0)在选择器中:

var headers = $('table th:gt(0)');
var $tds = $(tr).find('td:gt(0)');