使用jQuery和JSON数组创建HTML表

Question

I'm having difficulty trying to create an HTML table from a returned JSON string. Here's the JSON:

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

The Table should look like this:

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

I gave the "head" created, but can't figure out the "body".

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

Just can't get the logic to work. There are more headings in the returned JSON and tried to simplify for illustration. Please help, and thanks in advance!

Answer 1

It's better to just concatenate strings than create jQuery objects.

 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

create tr element if needed then use index to push td element

 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>