如何動態地添加新列的HTML表格

我有一個表，我目前動態添加行：http://jsfiddle.net/fmuW6/5/如何動態地添加新列的HTML表格

現在我想一個新列添加到表，以及一個點擊的按鈕。用戶將在文本框中輸入列標題。

我該如何做到這一點？如果用戶添加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表中，除了第一行，因爲這是列名

來源

2013-02-19 Anthony

未來，請在您的文章中包含所有相關代碼，並且**不要**只包含jsFiddle的鏈接。您的帖子應該獨立於任何其他資源;考慮一下如果jsFiddle將來會發生什麼事情！（這將是*糟糕的，*我們知道。） – 2013-02-19 18:01:12

http://jsfiddle.net/fmuW6/6/應該做你想做的。 – sberry 2013-02-19 18:02:56

sberry這會將'Foo'添加到列標題和行。我將它改爲'$（el）。append（「」）; '但是，然後添加chcekbox列名和行... – Anthony 2013-02-19 18:09:15

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

jsFiddle - Link

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 - 值。

來源

2013-02-19 18:14:17 GNi33

使用此代碼，添加新的列：

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

但你需要更改值對於包含文本的第一行以及包括<input type="checkbox" />的其他行。而且最好是

來源

2013-02-19 18:02:35

檢查出來的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>");  
      }) 
    });  
});

來源

2013-02-19 18:08:22

請參閱更新。我想在行級添加一個複選框。 – Anthony 2013-02-19 18:13:31

http://jsfiddle.net/fmuW6/12/ – 2013-02-19 18:18:58

答案有用，但這裏仍然是另一種方式，我們使用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">'))}); 
} 
});

來源

2013-02-19 18:42:17

如何動態地添加新列的HTML表格

回答

相關問題