如何用JS/JQuery在HTML表格指定位置插入带按钮的行？

嘿，这个需求挺实用的！我给你准备了两种实现方式——原生JavaScript和jQuery，都能轻松搞定在指定位置添加表格行的功能，咱们一步步来：

这种方式不需要依赖任何库，纯原生代码就能实现，兼容性也很好：

首先，咱们先把初始的HTML表格补全得更完整一点（方便测试）：

<table id='exptable' border="1">
  <tr>
    <td>(date)</td>
    <td><input type='text' placeholder='Expense type (rent, groceries, etc.)'/></td>
    <td><input type='number' step="0.01" value='.00'/></td>
    <td><input type='button' class='addrow' value='Add Row Below'/></td>
  </tr>
</table>

然后是核心的JS代码，这里用事件委托来处理动态添加的按钮（不然新生成的按钮会没有点击事件）：

// 监听表格的点击事件，委托给.addrow按钮
document.getElementById('exptable').addEventListener('click', function(e) {
  // 判断点击的元素是不是添加按钮
  if (e.target.classList.contains('addrow')) {
    // 找到当前按钮所在的行
    const currentRow = e.target.closest('tr');
    
    // 创建新的行元素
    const newRow = document.createElement('tr');
    // 给新行填充内容，和初始行结构一致
    newRow.innerHTML = `
      <td>(date)</td>
      <td><input type='text' placeholder='Expense type (rent, groceries, etc.)'/></td>
      <td><input type='number' step="0.01" value='.00'/></td>
      <td><input type='button' class='addrow' value='Add Row Below'/></td>
    `;
    
    // 把新行插入到当前行的后面
    currentRow.insertAdjacentElement('afterend', newRow);
  }
});

如果你已经在项目里用了jQuery，那代码会更简洁：

同样先补全HTML（和上面一致），然后写jQuery代码：

// 用事件委托监听所有.addrow按钮的点击
$(document).on('click', '.addrow', function() {
  // 找到当前按钮所在的行
  const $currentRow = $(this).closest('tr');
  
  // 构造新行的HTML（或者也可以克隆当前行后清空输入值）
  const newRowHtml = `
    <tr>
      <td>(date)</td>
      <td><input type='text' placeholder='Expense type (rent, groceries, etc.)'/></td>
      <td><input type='number' step="0.01" value='.00'/></td>
      <td><input type='button' class='addrow' value='Add Row Below'/></td>
    </tr>
  `;
  
  // 把新行插入到当前行后面
  $currentRow.after(newRowHtml);
});

一些小建议 #

• 日期单元格可以换成<input type="date">，让用户选择日期更方便，比如把<td>(date)</td>改成<td><input type="date"></td>。
• 如果需要克隆当前行的样式但清空输入内容，可以用$currentRow.clone()然后遍历输入框清空值，比如：

  const $newRow = $currentRow.clone();
  $newRow.find('input').val('').attr('placeholder', 'Expense type...'); // 清空输入框
  $currentRow.after($newRow);
  

• 给数字输入框加step="0.01"，能让用户输入金额时更精准，避免出现多位小数的问题。

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