使用 jQuery 和 JSON 数组创建 HTML 表

Question

我在尝试从返回的 JSON 字符串创建 HTML 表时遇到了困难。这是 JSON：

{
    "Heading 1": ["name 1", "name 2", "name 3"],
    "Heading 2": ["data 1", "data 2", "data 3"],
}

表格应如下所示：

<table>
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>name 1</td>
            <td>data 1</td>
        </tr>
        <tr>
            <td>name 2</td>
            <td>data 2</td>
        </tr>
        <tr>
            <td>name 3</td>
            <td>data 3</td>
        </tr>
    </tbody>
</table>

我给出了创建的“头”，但无法弄清楚“身体”。

var table = $('<table/>'),
    table_head = $('<thead/>'),
    head_row = $('<tr/>');

$.each(val, function (th, items) {
    head_row.append('<th>' + th + '</th>');

    var body_row = $('<tr/>');
    $.each(items, function (index, item) {

        // What do to here to create <td>'s ?!?!

    });
    console.log(items);
});

table_head.append(head_row);
table.append(table_head);

只是无法使逻辑起作用。返回的 JSON 中有更多标题，并试图简化以进行说明。请帮忙，提前谢谢！

Answer 1

最好只连接字符串而不是创建 jQuery 对象。

var json = {
    "Heading 1": ["name 1", "name 2", "name 3"],
    "Heading 2": ["data 1", "data 2", "data 3"],
};

var headings = Object.keys(json);

var html = '<table>';

// build table headings
html += '<thead><tr>';
$.each(headings, function () {
  // this is the current heading
  html += '<th>' + this + '</th>';
});
html += '</tr></thead>';


// build table body
html += '<tbody>';
// use the length of first array to determine how many rows
for (i = 0, len = json[headings[0]].length; i < len; i++) {
  html += '<tr>';
  // build each cell using the heading's ith element
  $.each(headings, function () {
    html += '<td>' + json[this][i] + '</td>';
  });
  html += '</tr>';
}
html += '</tbody>';
html += '</table>';

$('.container').append(html);

table {
  border-collapse: collapse;
}
th, td {  
  border: 1px solid #000;
}

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

Answer 2

如果需要，创建tr 元素，然后使用index 推送td 元素

var json = {
  "Heading 1": ["name 1", "name 2", "name 3"],
  "Heading 2": ["data 1", "data 2", "data 3"],
};

var table = $('<table/>'),
  table_head = $('<thead/>'),
  head_row = $('<tr/>'),
  table_body = $('<tbody/>'),
  body_row = [];

$.each(json, function(th, items) {
  head_row.append('<th>' + th + '</th>');
  $.each(items, function(index, item) {
  
    if (body_row[index] === undefined) {
      body_row[index] = $('<tr/>');
      body_row[index].append('<td>' + item + '</td>');
    } 
    else
      body_row[index].append('<td>' + item + '</td>');
  });
  
  //console.log(items);
});

table_head.append(head_row);
table_body.append(body_row)
table.append(table_head);
table.append(table_body);
$('body').html(table)

table {
  border-collapse: collapse;
}
th, td {  
  border: 1px solid #ccc;
}

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