插入表 <td> 特定标题下的单元格 <th> 从一个对象

Question

给定一个Javscript对象：

var obj = {
  "results": [{
      "B": "Row 1 Col 2"
    }, {
      "A": "Row 2 Col 1"
      "B": "Row 2 Col 2"
    }, {
      "C": "Row 3 Coll 3"
    }
  }]

我希望将其转换为如下表。

<table border="1">
  <thead>
    <tr>
      <th id="A">A</th>
      <th id="B">B</th>
      <th id="C">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Row 1 Col 2</td>
      <td></td>
    </tr>
    <tr>
      <td>Row 2 Col 1</td>
      <td>Row 2 Col 2</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Row 3 Col 3</td>
    </tr>
  </tbody>
</table>

看起来像：

更准确地说，我正在寻找一种以某种方式将属性的值直接插入属性的方法。 并在依次读取对象时出现新属性时创建新的标头。 这是解决我感觉到的问题的一种更好的方法，因为它对于任意对象都更加通用。

这就是为什么我想知道是否有任何HTML标记或jQuery方式，以便我可以直接在我选择的特定标题下插入一个单元格，而不是计算并插入适当数量的“ <td></td> ”直到我得到到正确的单元格

小提琴： https : //jsfiddle.net/kqsozme5/2/

Answer 1

跟随不关心有多少列，并且可以在完全任意的对象配置上工作。

它会在再次遍历数据以建立行之前对列名称进行排序，并根据需要创建空单元格

// create array of column keys and sort
var cols = obj.results.reduce(function(arr, currObj) {
    return arr.concat(Object.keys(currObj).filter(function(key) {
        return arr.indexOf(key) == -1
    }));
}, []).sort();
// create header from sorted column keys
var header = '<tr><th>' + cols.join('</th><th>') + '</th></tr>';

var rows = obj.results.map(function(item) {
    // loop over column keys checking matches to item keys
    return '<tr>' +
        cols.map(function(key) {
            return '<td>' + (item.hasOwnProperty(key) ? item[key] : '') + '</td>';
        }).join('') + '</tr>';
}).join('');
var table = '<table  border="1">' + header + rows + '</table>';

 var obj = { "results": [{ "B": "Row 1 Col 2" }, { "A": "Row 2 Col 1", "B": "Row 2 Col 2" }, { "C": "Row 3 Coll 3" }] }; // create array of column keys and sort var cols = obj.results.reduce(function(arr, currObj) { return arr.concat(Object.keys(currObj).filter(function(key) { return arr.indexOf(key) == -1 })); }, []).sort(); // create header from sorted column keys var header = '<tr><th>' + cols.join('</th><th>') + '</th></tr>'; var rows = obj.results.map(function(item) { // loop over column keys checking matches to item keys return '<tr>' + cols.map(function(key) { return '<td>' + (item.hasOwnProperty(key) ? item[key] : '') + '</td>'; }).join('') + '</tr>'; }).join(''); var table = '<table border="1">' + header + rows + '</table>'; $('body').append(table); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

HTML：

<tbody id = "idTBody">

jQuery：

for(var result in obj.results)
{
    for(var col in obj.results[result])
    {
        $("#idTBody").append("<tr>");
        if(col == 'A'){ $("#idTBody").append("<td>"+obj.results[result][col]+"</td>");}
        else {$("#idTBody").append("<td></td>");}
        if(col == 'B'){ $("#idTBody").append("<td>"+obj.results[result][col]+"</td>");}
        else {$("#idTBody").append("<td></td>");}
        if(col == 'C'){ $("#idTBody").append("<td>"+obj.results[result][col]+"</td>");}
        else {$("#idTBody").append("<td></td>");}
        $("#idTBody").append("</tr>");
    }
}

Answer 3

为什么不使用数组

var object = {
  result: [['a', 'b', 'c'],
           ['', 'rows1 col2', ''],
           ['row2 col1', 'row2 col2', '']]
}

转换成表格很容易。

Answer 4

假设您的对象是：

var obj = {
"results": [{
  "A": "",
  "B": "Row 1 Col 2",
  "C": ""
}, {
  "A": "Row 2 Col 1",
  "B": "Row 2 Col 2",
  "C": ""
}, {
  "A": "",
  "B": "",
  "C": "Row 3 Coll 3"
}
}]

HTML将是：

<table id="trialTable" border="1">
 <thead>
  <tr>
   <th id="A">A</th>
   <th id="B">B</th>
   <th id="C">C</th>
  </tr>
 </thead>
 <tbody>

 </tbody>
 </table>

jQuery将是：

var tbody = $("#trialTable > tbody");
tbody.empty();
$.each(obj.results, function(index, data) {
  var tr = $("<tr>");
  var td = $("<td>");

  tr.append($('<td>', {
        text: data.A
  }));
  tr.append($('<td>', {
        text: data.B
  }));
  tr.append($('<td>', {
        text: data.C
  }));
  tbody.append(tr);


});

您将获得预期的输出。据我所知，使用jQuery而不是简单的javascript总是很容易，而且也不会造成混乱。