JavaScript点击按钮删除表格指定行异常：误删第一行

问题根源 #

• 生成表格行时，行id的写法错误：id=tr'srN'是硬编码字符串，没有将变量srN的值插入进去，导致所有行的id都是tr'srN'，而非动态的tr1、tr2等唯一标识
• remove函数未接收传入的行号参数，且始终查找固定的tr'srN'id，所以每次只会删除第一个匹配该id的行（也就是第一行）

修正步骤 #

1. 动态生成行id：将行的id改为'tr'+srN，确保每一行都有唯一的id
2. 修正remove函数：让函数接收行号参数，根据参数拼接正确的id来删除对应行
3. 修复单选框重置逻辑：原代码重置单选框的方式错误，应取消选中状态而非修改value

修正后的完整代码 #

let srN = 1;
function getData(){
    let Name = document.getElementById("txtName").value;
    let fName = document.getElementById("txtFname").value;
    let mail = document.getElementById("txtEmail").value;
    let password = document.getElementById("txtPassword").value;
    let address = document.getElementById("txtAddress").value;
    let city = document.getElementById("txtCity").value;
    let work = document.querySelector('input[name="gridRadios"]:checked').value;
    let skills = document.getElementById("txtSkills").value;
    let experience = document.getElementById("txtExperience").value;
    let message = document.getElementById("msg").value;

    let tblData = document.getElementById("tbl");

    // 修正行id的生成，确保每个行id唯一
    let data = "<tr id='tr"+srN+"'><td>"+srN+"</td><td>"+Name+"</td><td>"+fName+"</td><td>"+mail+"</td> <td>"+password+"</td><td>"+address+"</td><td>"+city+"</td><td>"+work+"</td><td>"+skills+"</td><td>"+experience+"</td><td>"+message+"</td><td><button id='delRow"+srN+"' onclick='remove("+srN+")'>Delete</button></td></tr>";
    srN += 1;
    tblData.innerHTML += data;

    // 重置表单输入
    document.getElementById("txtName").value = "";
    document.getElementById("txtFname").value = "";
    document.getElementById("txtEmail").value = "";
    document.getElementById("txtPassword").value = "";
    document.getElementById("txtAddress").value = "";
    document.getElementById("txtCity").value = "";
    // 修复单选框重置
    const checkedRadio = document.querySelector('input[name="gridRadios"]:checked');
    if(checkedRadio) checkedRadio.checked = false;
    document.getElementById("txtSkills").value = "";
    document.getElementById("txtExperience").value = "";
    document.getElementById("msg").value = "";

    document.getElementById("txtName").focus();
}

// 接收行号参数，删除对应行
function remove(rowNum){
    document.getElementById("tr"+rowNum).remove(); 
}

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