嘿，我明白你现在的困扰——重复写几乎一样的代码上百次可太折磨人了！先看看你提到的界面示意：

咱们可以通过几个简单的重构步骤来彻底解决这个硬编码的问题，让代码变得通用又简洁。

第一步：通用绑定点击事件 #

不用给每个带编号的按钮单独写事件，改用属性前缀选择器匹配所有以addbtn开头的按钮：

$("body").on("click", "[id^='addbtn']", function () { 

第二步：提取按钮的编号 #

从点击的按钮ID里提取对应的数字，比如addbtn3就拿到3，这是通用逻辑的核心：

// 从按钮ID中剥离出编号
const btnId = $(this).attr("id");
const rowNum = btnId.replace("addbtn", "");

第三步：用编号统一获取元素 #

有了rowNum，就不用再逐个硬编码3了，直接拼接选择器获取所有需要的元素：

// 用rowNum动态拼接选择器
const toolListUpdate = $(`#ToolList${rowNum}`);
const genericDropDownListUpdateOne = $(`#GenericDropdownOne${rowNum}`);
const genericDropDownListUpdateTwo = $(`#GenericDropdownTwo${rowNum}`);
const genericDropDownListUpdateThree = $(`#GenericDropdownThree${rowNum}`);
const genericDropDownListUpdateFour = $(`#GenericDropdownFour${rowNum}`);
const changeNoticeNumberLinkUpdate = $(`#changeNoticeNumberLink${rowNum}`);
const holdLotNumberLinkUpdate = $(`#holdLotNumberLink${rowNum}`);
const hotLotNumberLinkUpdate = $(`#hotLotNumberLink${rowNum}`);
const wITALinkUpdate = $(`#wITANumberLink${rowNum}`);
const commentUpdateSmall = $(`#commentSmall${rowNum}`);
const commentUpdateMedium = $(`#commentMedium${rowNum}`);
const commentUpdateLarge = $(`#commentLarge${rowNum}`);
const fieldid = $(`#fieldid${rowNum}`);

const tBody = $(`#tblUpdate${rowNum} > #tbodyUpdate${rowNum}`)[0];
const tBodyUpdate = $(`#tblUpdate > #tbodyUpdate`)[0]; // 如果这个表格也带编号，记得加上${rowNum}

第四步：抽离重复的插入行逻辑 #

你代码里有两段几乎完全一样的插入表格行的代码，直接抽成复用函数，避免重复：

// 定义插入表格行的通用函数
function insertTableRow(targetTbody, fieldVal, toolVal, dd1Val, dd2Val, dd3Val, dd4Val, cnnVal, hlnVal, htlVal, witaVal, csVal, cmVal, clVal) {
  const row = targetTbody.insertRow(-1);
  
  // 依次插入各列内容
  $(row.insertCell(-1)).html(fieldVal);
  $(row.insertCell(-1)).html(toolVal);
  $(row.insertCell(-1)).html(dd1Val);
  $(row.insertCell(-1)).html(dd2Val);
  $(row.insertCell(-1)).html(dd3Val);
  $(row.insertCell(-1)).html(dd4Val);
  $(row.insertCell(-1)).html(cnnVal);
  $(row.insertCell(-1)).html(hlnVal);
  $(row.insertCell(-1)).html(htlVal);
  $(row.insertCell(-1)).html(witaVal);
  $(row.insertCell(-1)).html(csVal);
  $(row.insertCell(-1)).html(cmVal);
  $(row.insertCell(-1)).html(clVal);
  
  // 插入时间戳
  const timestamp = $("<div>@DateTime.Now</div>");
  $(row.insertCell(-1)).append(timestamp);
  
  return row;
}

然后在点击事件里直接调用这个函数即可，还能单独处理第一行的删除按钮：

// 给第一个表格插入行并添加删除按钮
const firstRow = insertTableRow(tBody, fieldid.val(), toolListUpdate.val(), 
  genericDropDownListUpdateOne.val(), genericDropDownListUpdateTwo.val(),
  genericDropDownListUpdateThree.val(), genericDropDownListUpdateFour.val(),
  changeNoticeNumberLinkUpdate.val(), holdLotNumberLinkUpdate.val(),
  hotLotNumberLinkUpdate.val(), wITALinkUpdate.val(),
  commentUpdateSmall.val(), commentUpdateMedium.val(), commentUpdateLarge.val()
);

const btnRemove = $("<input />");
btnRemove.attr("type", "button");
btnRemove.attr("class", "btn btn-link remove");
btnRemove.attr("style", "font-size: 11px; color:red;");
btnRemove.val("- Remove");
$(firstRow.insertCell(-1)).append(btnRemove);

// 给第二个表格插入行
insertTableRow(tBodyUpdate, fieldid.val(), toolListUpdate.val(), 
  genericDropDownListUpdateOne.val(), genericDropDownListUpdateTwo.val(),
  genericDropDownListUpdateThree.val(), genericDropDownListUpdateFour.val(),
  changeNoticeNumberLinkUpdate.val(), holdLotNumberLinkUpdate.val(),
  hotLotNumberLinkUpdate.val(), wITALinkUpdate.val(),
  commentUpdateSmall.val(), commentUpdateMedium.val(), commentUpdateLarge.val()
);

第五步：统一清空输入框 #

把需要清空的元素放进数组，遍历清空，不用逐个写val("")：

// 统一清空所有输入控件
const inputsToClear = [
  toolListUpdate, genericDropDownListUpdateOne, genericDropDownListUpdateTwo,
  genericDropDownListUpdateThree, genericDropDownListUpdateFour,
  changeNoticeNumberLinkUpdate, holdLotNumberLinkUpdate, hotLotNumberLinkUpdate,
  wITALinkUpdate, commentUpdateSmall, commentUpdateMedium, commentUpdateLarge
];

inputsToClear.forEach(input => input.val(""));

这样改造后，不管你有多少个addbtnX按钮，这段代码都能通用，再也不用重复写几百次几乎一样的代码了！

另外给个小建议：如果后续有机会调整HTML结构，尽量用类名代替带编号的ID（比如给所有ToolList元素加tool-list类），再结合DOM的父子/兄弟关系获取元素，代码会更简洁易维护~

备注：内容来源于stack exchange，提问作者Donnie