使用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>