JQuery指定类后添加行：添加按钮异常添加至每行末尾问题

我太懂这种头疼的情况了——点某一行的Add按钮，本来只想在这行后面插新行，结果所有行末尾都冒出来新内容，完全不是预期的效果！先看看你给出的代码片段：

var i = 2; 
$(document).on("click",".btn_add",function(){ 
  var str1 = '<tr><td>'+i+'</td><td>Row '+i+'</td><td><button class="btn btn-sm btn-success btn_add">Add</button>&nbsp;&nbsp;<button class="btn btn-sm btn-success btn_addsub">Add Sub</button></td></tr>'; 
  // 你这里的插入逻辑应该是用了全局选择器，才导致所有行都被影响
});

问题根源 #

你大概率是在插入新行时，没有精准定位到当前点击按钮所在的那一行，反而用了类似$('tbody').append(str1)或者$('tr').after(str1)这种全局选择器，导致新行被追加到了所有<tr>元素的后面。

修复方案 #

核心思路是用$(this)锁定当前被点击的按钮，找到它所属的目标行，再把新行插到这一行的后面。修改后的完整代码如下：

var i = 2; 
$(document).on("click",".btn_add",function(){ 
  var str1 = '<tr><td>'+i+'</td><td>Row '+i+'</td><td><button class="btn btn-sm btn-success btn_add">Add</button>&nbsp;&nbsp;<button class="btn btn-sm btn-success btn_addsub">Add Sub</button></td></tr>'; 
  // 关键：精准定位目标行并插入新内容
  $(this).closest('tr').after(str1);
  i++; // 别忘了递增序号，不然新行的编号会一直重复
});

关键步骤解释 #

• $(this)：代表当前被点击的那个Add按钮，而不是页面上所有的.btn_add元素，这是精准定位的核心
• .closest('tr')：从当前按钮向上查找最近的<tr>父元素，也就是你想要在后面插入新行的目标行
• .after(str1)：把新生成的<tr>元素插入到目标行的后面，完美实现“点哪行的Add，就在哪行后面加新行”的需求

这样修改后，再点击Add按钮，新行就只会出现在你点击的那一行后面啦！

内容的提问来源于stack exchange，提问作者shachi gandhi