点击按钮后在下方插入表格行的实现方案咨询

我明白你想要在表格的目标行正下方插入特定的按钮行，结合你给出的代码框架，这里提供一个完整的实现方案：

核心思路 #

当点击.btn.btn-dark.btn-sm按钮时，先定位到该按钮所在的表格行，然后将你指定的<tr>元素插入到该行的正下方，同时可以加入重复插入的判断逻辑，避免多次点击生成重复元素。

完整实现代码 #

<!-- 示例表格结构 -->
<table class="table">
  <thead>
    <tr>
      <th>列1</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>目标行内容</td>
      <td><button type="button" class="btn btn-dark btn-sm">点击添加Product2行</button></td>
    </tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this));

function clickDispatcherTable() {
  // 1. 获取当前点击按钮所在的表格行
  const targetRow = $(this).closest('tr');
  
  // 2. 判断目标行下方是否已存在要插入的元素，避免重复添加
  const hasAdded = targetRow.next().find('.product2').length > 0;
  if (hasAdded) {
    return; // 已存在则直接返回
  }

  // 3. 创建你需要插入的<tr>元素
  const insertRow = $(`
    <tr>
      <td></td>
      <td>
        <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2"> Add Product2 </button>
      </td>
    </tr>
  `);

  // 4. 将新行插入到目标行的正下方
  insertRow.insertAfter(targetRow);
}
</script>

关键细节说明 #

• 定位目标行：使用closest('tr')可以精准找到按钮所在的最近表格行，比parent()更可靠，因为按钮可能嵌套在多层元素里。
• 避免重复插入：通过targetRow.next().find('.product2').length判断下一行是否包含目标按钮，防止用户多次点击生成重复行。
• 元素创建：用jQuery的模板字符串语法直接生成HTML元素，代码可读性更高。

如果你的表格结构有特殊嵌套，只需要调整closest()的选择器或者元素查找逻辑即可适配。

内容的提问来源于stack exchange，提问作者Carol.Kar