jQuery Tab内表格Add/Remove按钮失效及行标识、数据保存问题

我看了你的代码，发现几个关键问题导致按钮点击没反应，同时帮你实现了文本框值的持久保存和行的唯一标识，下面是修复后的完整代码和详细说明：

修复后的HTML代码 #

<div id="tabs-2"> 
  <form id="DSLform"> 
    <table id="table-1" class="add1" border ="1"><!-- DSL --> 
      <thead> 
        <tr><td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td></tr> 
        <tr> 
          <th class="small">S.No</th> 
          <th>LOCO NO</th> 
          <th>SHED</th> 
          <th class="sizing"> SCHEDULE</th> 
          <th> PROGARMME </th > 
          <th><button type="button" class="add1" value="+">+</button></th> <!-- 替换submit为button，避免表单提交刷新页面 --> 
        </tr> 
      </thead> 
      <tbody> 
        <tr class="tabRow1" data-row-id="row-1"> <!-- 用data属性做唯一行标识 --> 
          <td class="sno1">1</td> 
          <td><input type="text" name="loco_no" class="form-input"/></td> 
          <td><input type="text" name="shed" class="form-input"/></td> 
          <td><input type="text" name="schedule" class="form-input"/></td> 
          <td><input type="text" name="programme" class="form-input"/></td> 
          <td><button class="remove1">Remove</button></td> 
        </tr> 
      </tbody> 
    </table>
  </form>
</div>

修复后的JavaScript代码 #

$(document).ready( function() { 
  // 存储表格所有行数据的数组，每个元素对应一行的键值对
  let tableData = [
    {
      rowId: "row-1",
      loco_no: "",
      shed: "",
      schedule: "",
      programme: ""
    }
  ];

  // 生成唯一行ID的工具方法（用时间戳保证不重复）
  function generateRowId() {
    return `row-${Date.now()}`;
  }

  // 更新所有行序号的通用方法
  function updateSerialNumbers() {
    $("td.sno1").each(function(index, element){
      $(element).text(index + 1);
    });
  }

  // 监听输入框变化，实时同步到存储数组
  $("#tabs-2").on("change", ".form-input", function() {
    const $row = $(this).closest(".tabRow1");
    const rowId = $row.data("row-id");
    const fieldName = $(this).attr("name");
    // 找到对应行的数据并更新值
    const targetRow = tableData.find(item => item.rowId === rowId);
    if (targetRow) {
      targetRow[fieldName] = $(this).val();
    }
  });

  // Add按钮点击逻辑
  $("#tabs-2").on("click", ".add1", function(){ 
    const rowLen = $('tr.tabRow1').length; 
    if(rowLen >= 10) { // 改为>=，严格限制最多10行
      alert("Number of rows has reached 10"); 
      return;
    } 

    const newRowId = generateRowId();
    // 克隆第一行（不克隆事件，因为用了事件委托）
    const $newRow = $("tr.tabRow1:first").clone(false).appendTo("#table-1>tbody");
    $newRow.data("row-id", newRowId);
    // 清空新行的输入框
    $newRow.find(".form-input").val("");
    // 新增行数据到存储数组
    tableData.push({
      rowId: newRowId,
      loco_no: "",
      shed: "",
      schedule: "",
      programme: ""
    });
    // 更新行序号
    updateSerialNumbers();
  }); 

  // Remove按钮点击逻辑
  $("#tabs-2").on("click", "button.remove1", function(){ 
    const $currentRow = $(this).closest("tr.tabRow1");
    const rowCount = $('tr.tabRow1').length;
    if(rowCount <= 1) { 
      alert("You can't remove the last record"); 
      return;
    } 
    // 从存储数组中删除对应行数据
    const rowId = $currentRow.data("row-id");
    tableData = tableData.filter(item => item.rowId !== rowId);
    // 删除DOM中的行
    $currentRow.remove(); 
    // 更新行序号
    updateSerialNumbers();
  }); 
});

核心问题修复与功能说明 #

• 解决点击事件失效：

  1. 你之前错误地把事件绑定到了#tabs-1，但表格实际在#tabs-2标签页内，改成$("#tabs-2").on(...)的事件委托方式，确保动态新增的行也能触发事件
  2. 将Add按钮从type="submit"改为type="button"，避免点击时触发表单提交导致页面刷新，这是事件失效的最常见原因

• 行标识实现：
  用data-row-id属性给每行分配唯一ID（基于时间戳生成），可以精准对应到存储的数据，方便增删操作时同步更新数据集合

• 文本框值保存：
  维护了tableData数组存储所有行的输入值，监听输入框的change事件实时更新对应数据；删除行时同步从数组移除数据，新增行时添加空数据对象。你可以在需要提交或使用数据时直接调用这个数组

• 细节优化：

  • 调整行数量判断逻辑，严格限制最多10行
  • 克隆行时使用clone(false)，避免重复绑定事件（依赖事件委托即可）
  • 提取通用的行序号更新方法，减少重复代码

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