如何使用JQuery在点击Add按钮的行下方添加新行？

问题分析 #

你的代码存在几个关键问题：

• jQuery代码中选择器缺少$符号，无法正确定位元素
• 依赖index计算位置容易因表头行、动态新增行导致索引混乱，不如直接操作当前行可靠
• 原HTML存在标签未闭合问题（<th>、<tr>未收尾）
• 初始绑定的click事件只对页面加载时已存在的按钮生效，动态添加的按钮无法触发点击

修正后的完整代码 #

HTML代码（修复结构问题）

<table id="table_id">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td><button class="add">Add</button></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td><button class="add">Add</button></td>
  </tr>
  <tr>
    <td>Adam</td>
    <td>Johnson</td>
    <td>67</td>
    <td><button class="add">Add</button></td>
  </tr>
</table>

jQuery代码（修复逻辑+优化实现）

$(document).ready(function () {
    // 用事件委托处理动态生成的按钮点击
    $('#table_id').on('click', '.add', function () {
        // 获取当前按钮所在的行
        var currentRow = $(this).closest('tr');
        // 构造新行HTML（可根据需求修改内容）
        var newRowHtml = '<tr><td>New</td><td>User</td><td>0</td><td><button class="add">Add</button></td></tr>';
        // 在当前行下方插入新行
        currentRow.after(newRowHtml);
    });
});

关键改进说明 #

• 事件委托：通过绑定到表格容器，确保后续动态添加的按钮也能触发点击事件
• 直接操作行：用closest('tr')精准定位当前行，避免索引计算错误
• 规范HTML结构：补全未闭合的标签，保证表格渲染正常

内容的提问来源于stack exchange，提问作者Puja Neve