Question

我正在尝试创建一个表，在该表中可以动态添加行/列，但是在添加列时遇到了问题。

在此处查看JSFiddle

表本身开始非常简单。它在底部有一个“添加行”按钮，在第一列中有一个“添加列”按钮：

<form name="myform" id="myform">
    <table id="tablegrid">
        <tr id="Row1">
            <td class="space">&nbsp;</td>
            <td>State 1<BR><button type="button" class="btnAddCol">Add Col</button>
    </br></td>
        </tr>
        <tr id="Row2">
            <td>
                <input type="text" placeholder="Name" name="Name" />
            </td>
            <td>
                <input type="checkbox" name="State1" />
            </td>
        </tr>
    </table>
    <button type="button" id="btnAdd">Add Row</button>
    </br>
    <input type="submit"></input>
</form>

第一列中的“添加列”按钮可添加列。

每个新列都应具有一个“添加栏”按钮以添加更多列。该代码附加了“添加颜色”按钮，但是新按钮不起作用（仅第一个添加颜色按钮起作用）。

请参见下面的Javascript

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


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

         });
         iter += 1;
      });

如何使新的“添加颜色”按钮起作用？

Answer 1

更改此：

$('.btnAddCol').click(function () {
    //code here
});

收件人：

$(document).on('click', '.btnAddCol', function () {
    //code here
});

在您的代码中，当用户单击按钮时，仅触发一个事件。但是在我的示例中，每次用户单击页面时都会触发事件。第二个参数是clicked元素必须具有的类。

动态将带有复选框的列添加到表单中的html表

1 个答案: