插入表 <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總是很容易，而且也不會造成混亂。