jQuery实现点击新增表格行时动态修改按钮文本与颜色样式

• 违反DOM id唯一规范：所有克隆行都保留了相同的id="addButton"，会导致选择器匹配、事件绑定出现异常
• 选择器范围错误：$("tr").find("#addButton")会匹配全表所有行的按钮，误修改首行原有新增按钮的样式
• 逻辑缺失：仅设置了边框颜色，没有修改按钮文本，也没有给新增按钮绑定对应操作逻辑
• 事件绑定方式不支持动态元素：直接给初始按钮绑定事件，后续新增的按钮无法触发对应逻辑
• HTML结构不匹配：JS中往tbody追加内容，但初始HTML未写<tbody>标签，易引发DOM结构异常

HTML部分 #

<table id="TextBoxesGroup">
  <tbody>
    <tr class="addRows">
      <td>Start Date:</td>
      <td>
        <input type="text" name="StartDate[]" class="picker" value="" size="6">
      </td>
      <td>End Date:</td>
      <td>
        <input type="text" name="EndDate[]" class="picker" value="" size="6">
      </td>
      <td>
        <input type="button" class="action-btn add-btn" value="add row" />
      </td>        
    </tr>
  </tbody>
</table>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

JS部分 #

$(function () {
  // 页面加载完成后提前克隆行模板，传false参数不克隆原有事件和数据
  const $rowTemplate = $(".addRows").clone(false);

  // 事件委托绑定新增行逻辑，适配动态元素
  $("#TextBoxesGroup").on("click", ".add-btn", function () {
    const $newRow = $rowTemplate.clone(false);
    // 仅修改当前新行内的按钮，不影响其他行
    $newRow.find(".action-btn")
      .removeClass("add-btn")
      .addClass("delete-btn")
      .val("delete")
      .css("border-color", "red");
    
    $("#TextBoxesGroup tbody").append($newRow);
    // 如果你用了日期选择器插件，解开下面注释给新行的输入框初始化插件
    // $newRow.find(".picker").datepicker();
  });

  // 绑定删除行逻辑，不需要可以删除
  $("#TextBoxesGroup").on("click", ".delete-btn", function () {
    $(this).closest("tr").remove();
  });
});

• 移除重复id，改用class区分按钮功能，从根源避免id冲突
• 所有事件改用委托方式绑定到父表格，后续动态新增的按钮无需重复绑定事件即可生效
• 新行追加后，仅操作当前新行内部的按钮修改样式、文本、class，不会干扰首行的原有新增按钮
• 补全<tbody>标签，保证DOM结构和JS操作目标一致
• 克隆节点时传入false参数，避免把原有节点的事件、缓存数据克隆到新节点引发冲突
• 额外补充了删除按钮的行移除逻辑，不需要直接删除对应代码块即可

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