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 - 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;
});

这将为每一行添加一个新列，包括一个计数变量，该变量将作为名称应用于第一行，并应用于以下行中复选框的name-attribute。

考虑使用th - 表头的元素，这样你就不需要进行索引检查，而且语义更正确。

我遗漏了用户为列添加名称的部分，但正如您所见，您可以将iter - 值替换为最终值。

Answer 2

答案有效，但仍然是我们使用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 3

使用此代码添加新列：

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

但是您需要使用文本更改第一行的值，而其他行则包含<input type="checkbox" />。

更好

Answer 4

检查出来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 5

现代的纯JavaScript解决方案：

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

第一行将包含th而不是td。每个新单元格都包含一个input。随时更改此设置以适合您的需求。

如何动态地将新列添加到HTML表

5 个答案: