如何向 HTML 表格動態添加新列

Question

我有一個表，我目前正在向其中動態添加行： http : //jsfiddle.net/fmuW6/5/

現在，我還想通過單擊按鈕向表格中添加一個新列。 用戶將在文本框中輸入列標題。

我怎樣才能做到這一點？ 如果用戶添加 4 行，“ Add a new Column按鈕應處理所有現有行（在每一行中添加復選框）。

更新

我希望在行級別添加列名和復選框。

所以我添加了用戶將在其中輸入列名的文本框： http : //jsfiddle.net/fmuW6/10/

<input type=text placeholder='columnname'/>
<button type="button" id="btnAddCol">Add new column</button></br></br>

所以當用戶單擊按鈕時，列名應該是文本框中的值，而行級別應該是復選框。 所以基本上新列應該附加到表中除了第一行之外的所有tr ，因為那是列名

Answer 1

我用一個小例子更新了你的小提琴，你如何做到這一點。

jsFiddle - 鏈接

var myform = $('#myform'),
    iter = 0;

$('#btnAddCol').click(function () {
     myform.find('tr').each(function(){
         var trow = $(this);
         if(trow.index() === 0){
             trow.append('<td>Col+'iter+'</td>');
         }else{
             trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>');
         }
     });
     iter += 1;
});

這將向每一行添加一個新列，包括一個計數變量，該變量作為名稱應用於第一行以及隨后行中復選框的名稱屬性。

考慮將th - 元素用於表頭，這樣您就不需要我正在做的索引檢查，而且在語義上會更正確。

我省略了用戶為列輸入名稱的部分，但如您所見，您可以最終將iter - 值替換為該值。

Answer 2

現代純 JavaScript 解決方案：

 function addColumn() { [...document.querySelectorAll('#table tr')].forEach((row, i) => { const input = document.createElement("input") input.setAttribute('type', 'text') const cell = document.createElement(i ? "td" : "th") cell.appendChild(input) row.appendChild(cell) }); } document.querySelector('button').onclick = addColumn

 <table id="table"> <tr><th><input type="text" value="test 1" /><th/></tr> <tr><td><input type="text" value="test 2" /><td/></tr> </table> <button type="button">add column</button>

第一行將包含th而不是td 。 每個新單元格都包含一個input 。 隨意更改它以滿足您的需要。

Answer 3

答案有效，但這里仍然是我們使用 thead 和 tbody 的另一種方式！

JS

$('#irow').click(function(){
if($('#row').val()){
    $('#mtable tbody').append($("#mtable tbody tr:last").clone());
    $('#mtable tbody tr:last :checkbox').attr('checked',false);
    $('#mtable tbody tr:last td:first').html($('#row').val());
}
});
$('#icol').click(function(){
if($('#col').val()){
    $('#mtable tr').append($("<td>"));
    $('#mtable thead tr>td:last').html($('#col').val());
    $('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="checkbox">'))});
}
});

Answer 4

使用此代碼添加新列：

$('#btnAddCol').click(function () {
    $("tr").append("<td>New Column</td>");
});

但是您需要使用文本和其他內容更改第一行的值以包含<input type="checkbox" /> 。 而且最好

Answer 5

看看 jsFiddle ..................... http://jsfiddle.net/fmuW6/8/

 $(document).ready(function () {
        $('#btnAdd').click(function () {
              var count = 3, first_row = $('#Row2');
                while(count-- > 0)                    first_row.clone().appendTo('#blacklistgrid');
     });   

        $('#btnAddCol').click(function () {
            $("#blacklistgrid tr").each(function(){
               $(this).append("<td>test</td>");       
            })
     });      
 });

Answer 6

使用 4 列的表格：

我可以像這樣動態地添加值：

 var TableId = "table_" + id; 

 var table = $("#" + TableId );

 table.find("tbody tr").remove();
                                            
 table.append("<tr><td>" + "1" + "</td><td>" + "lorem"  + "</td><td>" + "ipsum" + "</td><td>" + "dolor" + "</td></tr>");

最終結果將是：