Question

我正在使用jQuery在点击按钮时动态地向我的HTML表添加行。对于新添加的行，我想要一个“+”和“X”按钮来添加/删除动态添加的行。

我的HTML相同如下：

<td>  
<button type="button" class="addRow"> +  
</button>
</td>

我的jQuery代码如下：

$("#table-id").each(function(){
    $("button.addRow", this).live('click', function() {

    var html = '<tr><td> </td> <td> </td> <td> </td> <td> <input type="textbox" name="dateLastContact" class="datesToBeAdded"> </td> ' +  
    '<td> <input type="text" name="newContact"> </td> <td> <input type="text" name="newContactPhone"> </td> ' +
    '<td> <input type="text" name="newContactEmail"> </td> <td> <button class="addRow">+</button> &nbsp; <button class="deleteRow">X</button> </td>  </tr>';  

    var row = $(this).closest('tr'); // get the parent row of the clicked button


    var newRow = $(html).insertAfter(row); // insert content
    /* add datepicker and jQuery UI Button styling to newly added row */
    newRow.find('td').css('text-align','center');
    newRow.find('.datesToBeAdded').datepicker();
    newRow.find('.addRow').button();
    newRow.find('.deleteRow').remove();
    });
});

但是，在添加新行时，我只是看不到'+'行旁边添加的'X'按钮。
我有什么想法我做错了。

谢谢，
Pritish。

Answer 1

有些事情，您的.live()处理程序可能真的是.delegate()，如下所示：

$("#table-id").delegate("button.addRow", "click", function()  {

那你在做什么：

newRow.find('.deleteRow').remove();

我认为你的意思是：

newRow.find('.deleteRow').button();

您也可以将它组合成两个按钮的一个语句：

newRow.find('.addRowm, .deleteRow').button();

或者，如果您打算在点击时删除该行，请执行以下操作：

newRow.find('.deleteRow').button().click(function() {
  $(this).closest('tr').remove();
});

Answer 2

您正在删除该行的按钮：

newRow.find('.deleteRow').remove();

删除按钮不会显示在动态添加的行中

2 个答案: