在现有行之后添加jQuery表格的行

Question

我想了解如何在datatable中的特定行后添加行。我使用jQuery datatables插件来实现此目的。

我可以将需要将行插入到javascript函数中的表格行索引传递给它，如下所示：

function addNewContact(rCount){ .. }

我的HTML代码是：

..../td> (第一列数据)

..../td> (第二列数据) ...

对于新添加的行，我希望前三列为空，其他列（5）包含文本框。

- Pritish

---

你不需要在你的代码周围添加 code 标签，只需将其缩进四个空格即可。 - Felix Kling

哦，好的，作为一个新手使用Stack Overflow，我不知道这一点。 不过，你有我的问题的解决方案吗？ - Pritish

Answer 1

假设你的表格长这样：

<table id="exampleTbl">  
    <tr>
        <td>....</td>
        <td>....</td>
        ...  
        <td>
           <button type="button" class="addRow" />+</button>
       </td>  
    </tr>
</table>

你可以为按钮添加一个点击处理程序来添加一行，像这样：

$(function() {
    // HTML template of a row
    var html = '<tr><td></td>...<td><button type="button" class="addRow">+</button></td></tr>';

    $('#exampleTbl').delegate('button.addRow', 'click', function() {
        var row = $(this).closest('tr'); // get the parent row of the clicked button
        $(html).insertAfter(row); // insert content
    });
});

注意事项：

• 由于使用了$(function(){...})，代码会在DOM加载后执行。
• 点击事件被表格捕获。这确保了新插入行的按钮也能正常工作。
• 不要混用风格。如果使用jQuery，请不要通过HTML中的onclick属性附加点击处理程序。这样做会使您的代码难以维护，并且使用jQuery方式更加灵活。

希望这有所帮助，如果您对此有疑问，请在本帖下评论。

- Felix Kling

---

嗨，Felix，感谢您的回复。 我尝试了您发送给我的相同代码，但是并没有完全起作用。 我尝试在执行onclick事件的函数中添加一些警报语句，如下所示：$（function（）{ //新行的HTML var html ='<tr><td> </td> <td> </td> <td> </td> <td> 1 </td> <td> 2 </td> </tr>';$（'#contactInfo'）。delegate（“button.addRow”，“click”，function（）{ alert（“button clicked”）; var row = $（this）.closest（tr）; //获取单击按钮的父行 $（html）.insertAfter（row）; //添加内容 }）;}）;但这并不完全起作用。 - Pritish

@Pritish：我的代码中有一些语法和引号错误，非常抱歉。我已经更新了它，你也可以在这里看到一个实时示例：http://jsfiddle.net/dxPzF/ - Felix Kling

嘿，Felix， 谢谢您的迅速回复。我想知道一件事，如果我的表格在一个<div>标签内（比如说id为exampleDiv），那么上面的javascript代码仍然有效吗？我看到您的代码完美地运行了，但是当我尝试相同的操作时，不会触发按钮的on-click事件中的函数()。 - Pritish

是的，它应该可以工作（如果你当然使用 #exampleDiv）。事件只会冒泡到元素处，处理程序附加在那里并在那里被处理。更多信息可以在此处找到http://www.quirksmode.org/js/events_order.html。jQuery只是利用了这个特性。如果你通过delegate()将事件处理程序附加到一个元素上，它只监听冒泡事件并检查原始目标。 - Felix Kling