How to Iterate Data table column dynamically (th header) using jquery

Question

Currently i am working in jquery data table. Initially my table contains 4 columns then, when i add insert data, it will append to data table column dynamically and added corresponding value to the row data. I have added image below.

If I added City It will append to table near Salary field and then corresponding data will get refreshed.

How to solve this? I am using Bootstap + jquery + java Spring.

Answer 1

You can append column like this.Here For each table row, new cell is inserted to the last position in the row.

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