jQuery 動態增減表格行：點擊「添加」追加一行，點擊「刪除」移除當前行，完整示例代碼

核心思路

• **添加**：構造 HTML 字符串，`$('#table tbody').append(html)`。
• **刪除**：事件委託綁定在 `tbody` 上，`$(this).closest('tr').remove()`。

完整可運行代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 動態表格增減行</title>
<style>
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
.btn { margin: 2px; padding: 4px 8px; cursor: pointer; }
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<button id="addRow" class="btn">添加一行</button>
<br><br>
<table id="dataTable">
  <thead>
    <tr><th>序號</th><th>名稱</th><th>數值</th><th>操作</th></tr>
  </thead>
  <tbody></tbody>
</table>

<script>
$(function() {
  var rowIndex = 0;

  // 添加行
  $('#addRow').click(function() {
    rowIndex++;
    var html = '<tr>'
      + '<td>' + rowIndex + '</td>'
      + '<td><input type="text" placeholder="名稱"></td>'
      + '<td><input type="number" placeholder="數值"></td>'
      + '<td><button class="delRow btn">刪除</button></td>'
      + '</tr>';
    $('#dataTable tbody').append(html);
  });

  // 刪除行（事件委託，支持動態添加的行）
  $('#dataTable tbody').on('click', '.delRow', function() {
    $(this).closest('tr').remove();
    // 可選：重新排序序號
    $('#dataTable tbody tr').each(function(i) {
      $(this).find('td:first').text(i + 1);
    });
  });
});
</script>
</body>
</html>

關鍵點說明

1. **事件委託** `tbody.on('click', '.delRow', ...)`：確保後來動態添加的「刪除」按鈕也能生效。
2. `closest('tr')`：向上查找最近的祖先 ``，精準定位要刪除的行。
3. 刪除後可選**重新排序序號**，保持視覺連續性。
4. 輸入框用 `placeholder` 提示，實際項目中可改為 `name="data[${index}].field"` 便於表單提交。

擴展建議

• 添加「上移/下移」按鈕，使用 `insertBefore`/`insertAfter` 調整行順序。
• 集成驗證插件（如 `jquery-validation`），提交前校驗必填項。
• 大量數據時考慮虛擬滾動或分頁，避免 DOM 過多導致卡頓。

複製上方代碼存為 `.html` 即可直接運行，實現表格行的動態增刪。