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>';

＆＃13;

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);

＆＃13;

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

＆＃13;

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总是容易且不那么混乱。

在Object的特定标头下插入表格单元格

4 个答案: