📌  相关文章
📜  动态生成的表格 - Javascript 代码示例

📅  最后修改于: 2022-03-11 15:04:06.954000             🧑  作者: Mango

代码示例1
//Creating the table
function CreateTableFromJSON() {
    console.log('CreateTableFromJSON invoked');
    var ObjTableData = OBJECT_GLOBAL;
    console.log(ObjTableData);

    var col = [];//create an empty array
    //get the number of records, and then get and array of the field names in order to build the table header
    for (var i = 0; i < ObjTableData.length; i++) {
        for (var key in ObjTableData[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }
    //create an element in which to put the table. This is done dynamically
    var table = document.createElement('table');
    var tr = table.insertRow(-1); // TABLE ROW.
    //actually build the table header
    for (var i = 0; i < col.length; i++) {
        var th = document.createElement('th'); // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }
    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < ObjTableData.length; i++) {
        tr = table.insertRow(-1);
        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);

            tabCell.innerHTML = ObjTableData[i][col[j]];
        }
    }
    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById('showData');
    divContainer.innerHTML = '';
    divContainer.appendChild(table);
}