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

Question

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

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

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

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