如何实现点击表格减号按钮时执行数据库行删除及后续脚本？

问题描述 #

开发了支持按钮点击增减行的表格，需求是点击某行减号按钮时，同时删除页面该行与数据库对应数据。当前按钮编号会随新增行自动递增，但removeRecord函数无法正确触发数据库删除逻辑，需要调整代码确保点击任意行（如第2行）的减号按钮时，完整执行包括数据库删除在内的后续脚本。

现有代码问题分析 #

1. 数据库删除逻辑被放在后续行编号更新的循环中，且依赖不存在的btn.clicked属性，导致永远不会执行
2. 从tktBody的.selected元素获取selectSeqNum，无法精准对应当前要删除的行，会导致删除错误数据
3. 页面行删除操作先于数据库删除，可能导致后续无法获取该行的关键数据

调整方案与代码修改 #

1. 核心逻辑调整要点 #

• 提前执行数据库删除：在删除页面行之前，先基于当前要删除的行获取数据并执行数据库删除
• 精准获取当前行数据：从点击按钮所在的行中提取TICKET_NUM和SEQ_NUM，而非从其他元素获取
• 移除无效判断条件：删除btn.clicked == true的无效判断，因为点击事件已经触发函数，直接执行删除即可
• 确保行数据存储：新增行时需为每行添加data-seq-num属性，存储该行对应的数据库SEQ_NUM值（原代码中row.seqNum需对应到这个属性）

2. 修改后的removeRecord函数 #

// * Removes a specific record, and decrements all records after by 1
function removeRecord(evt) {
  let button = evt.currentTarget;
  let value = parseInt(button.value);
  let row = button.parentElement.parentElement.parentElement; // 获取当前行的tbody元素
  let trElement = row.querySelector('tr'); // 获取行内的tr元素
  
  // 1. 获取当前要删除行的关键数据（确保新增行时已为tr添加data-ticket-num和data-seq-num属性）
  let selectTkt = trElement.dataset.ticketNum;
  let selectSeqNum = trElement.dataset.seqNum;

  // 2. 先执行数据库删除操作
  if (selectTkt && selectSeqNum) {
    // 建议使用参数化查询避免SQL注入，此处保留原格式仅做逻辑修正
    callDB(`DELETE FROM TABLE WHERE TICKET_NUM = '${selectTkt}' AND SEQ_NUM = '${selectSeqNum}'`);
  }

  // 3. 处理单行剩余的情况
  removedRecords.push(row.seqNum);
  if (recordCount == 1) {
    resetRecords(true, true);
    return;
  }

  // 4. 删除页面行
  row.remove();

  // 5. 更新后续行的编号
  for (let i = value + 1; i <= recordCount; i++) {
    let btn = document.getElementById("removeRecordBtn" + i);
    if (!btn) continue; // 防止找不到元素报错
    let currRow = btn.parentElement.parentElement.parentElement;
    
    // 递减后续行的编号
    btn.id = "removeRecordBtn" + (i - 1);
    btn.value = i - 1;
    currRow.querySelector("#recordCount").innerHTML = i - 1;
    currRow.id = "recordRow" + (i - 1);
  }

  recordCount--;
}

3. HTML新增行时的调整 #

新增行克隆模板后，需要为每行的<tr>元素添加data-ticket-num和data-seq-num属性，存储对应数据库的字段值：

// 示例新增行逻辑（需结合实际新增函数修改）
function addRecord() {
  let templateRow = document.getElementById('recordRow0');
  let newRow = templateRow.cloneNode(true);
  let newSeqNum = recordCount; // 或从数据库获取真实的SEQ_NUM
  
  // 设置新行的ID和编号
  newRow.id = "recordRow" + newSeqNum;
  newRow.querySelector("#recordCount").innerHTML = newSeqNum + 1;
  let removeBtn = newRow.querySelector("#removeRecordBtn0");
  removeBtn.id = "removeRecordBtn" + newSeqNum;
  removeBtn.value = newSeqNum;
  
  // 为tr添加数据属性，存储数据库关键值
  let tr = newRow.querySelector('tr');
  tr.dataset.ticketNum = 当前选中的ticket编号; // 替换为实际获取逻辑
  tr.dataset.seqNum = newSeqNum; // 或数据库返回的真实SEQ_NUM
  
  // 将新行添加到表格中
  document.getElementById('steptable').appendChild(newRow);
  newRow.style.display = 'table-row';
  recordCount++;
}

关键注意事项 #

• SQL注入风险：原代码直接拼接字符串到SQL语句中存在安全隐患，建议使用参数化查询（具体实现取决于callDB函数的支持情况）
• 数据一致性：若数据库的SEQ_NUM是自增主键，页面编号仅用于展示，无需同步修改数据库；若SEQ_NUM是业务编号，删除行后需同步更新后续行的SEQ_NUM（需额外编写数据库更新逻辑）
• 错误处理：建议为callDB函数添加错误回调，处理数据库删除失败的情况（比如提示用户、恢复页面行等）

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