jqueryを使用してデータテーブルの列を動的に（thヘッダ）を反復する方法

Question

現在、私はjqueryデータテーブルで作業しています。最初は私のテーブルには4つの列があり、挿入データを追加するとデータテーブルの列に動的に追加され、対応する値が行データに追加されます。私は下の画像を追加しました。

市を追加した場合給与フィールドの近くの表に追加され、対応するデータが更新されます。

これを解決するにはどうすればよいですか？私は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 
    } 
}