dimanche 4 février 2018

Wrap table data in tbody and thead

I have a table that is generated from JSON, here is the code (actually I didn't write it, just found on the Internet):

'use strict';
var _table = document.createElement('table'),
    _tr = document.createElement('tr'),
    _th = document.createElement('th'),
    _td = document.createElement('td');

// Builds the HTML Table out of myList json data from Ivy restful service.
function createTable(arr) {
    var table = _table.cloneNode(false),
        columns = addAllColumnHeaders(arr, table);
    for (var i = 0, maxi = arr.length; i < maxi; ++i) {
        var tr = _tr.cloneNode(false);
        for (var j = 0, maxj = columns.length; j < maxj; ++j) {
            var td = _td.cloneNode(false);
            var cellValue = arr[i][columns[j]];
            td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    return table;
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(arr, table) {
    var columnSet = [],
        tr = _tr.cloneNode(false);
    for (var i = 0, l = arr.length; i < l; i++) {
        for (var key in arr[i]) {
            if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {
                columnSet.push(key);
                var th = _th.cloneNode(false);
                th.appendChild(document.createTextNode(key));
                tr.appendChild(th);
            }
        }
    }
    table.appendChild(tr);
    return columnSet;
}

document.getElementById('employees').appendChild(createTable(tableData)).id = 'myTable';

So I would like to define header and body of the table by the thead and tbody tags and if it's matter, my table looks like this: enter image description here




Aucun commentaire:

Enregistrer un commentaire