如何使用jquery动态迭代数据表列（第标题）答案

【问题标题】：How to Iterate Data table column dynamically (th header) using jquery如何使用jquery动态迭代数据表列（第标题）
【发布时间】：2018-05-03 22:11:22
【问题描述】：

目前我正在处理 jquery 数据表。最初我的表包含 4 列然后，当我添加插入数据时，它将动态附加到数据表列并将相应的值添加到行数据。我在下面添加了图片。

如果我添加了 City 它将附加到 Salary 字段附近的表中，然后相应的数据将被刷新。

如何解决这个问题？我正在使用 Bootstap + jquery + java Spring。

【问题讨论】：

标签： javascript java jquery json bootstrap-4

【解决方案1】：

您可以像这样追加列。这里对于每个表格行，新单元格被插入到该行的最后一个位置。

// append column to the HTML table
function appendColumn() {
    var tbl = document.getElementById('my-table'), // table reference
    i;

    // open loop for each row and append cell
    for (i = 0; i < tbl.rows.length; i++) {
        createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
    }

    // create DIV element and append to the table cell
    function createCell(cell, text, style) {
        var div = document.createElement('div'), // create DIV element
        txt = document.createTextNode(text);     // create text node
        div.appendChild(txt);                    // append text node to the DIV
        div.setAttribute('class', style);        // set DIV class attribute
        div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
        cell.appendChild(div);                   // append DIV to the table cell
    }
}

【讨论】：

createCell() 是默认函数吗？
成功了吗？