如何实现通过输入框匹配ID删除HTML表格中的对应行？

我正在创建一个HTML表格，希望实现通过输入框输入ID，当输入内容与表格行的ID匹配时删除该行的功能，但目前无法实现。

原有代码 #

HTML部分

<body onload="addRow()">
<table id="myTable" style="display:none">
    <tr>
        <th class="borderless">ID</th>
        <th>Name</th>
        <th>Username</th>
        <th>Gender</th>
        <th>Country</th>
    </tr>
    <tbody id="myTableBody">
    </tbody>
</table>
<button type="button" id="buttonShow" onclick="showTable()">Show Table</button>
<button type="button"  id="buttonAdd" onclick="addRow()" disabled>Add a new row</button>
<br>
<label>
    <input  class="input1" type="text" name="todoTags"/>
    <button class="dellbtn" id="buttonDell"onclick="delRow()" disabled>Delete row</button>
</label>

JavaScript部分

function showTable(){
    document.getElementById("myTable").style.display = "block";
    document.getElementById("buttonAdd").disabled = false;
    document.getElementById("buttonDell").disabled = false;
}
const btn = document.querySelector('.dellbtn')
const userTags = []

解决方案 #

要实现按ID删除行的功能，需要补充addRow函数（生成带ID的行）和完善delRow函数（匹配ID并删除），修改后的完整代码如下：

修改后的HTML

<body onload="addRow()">
<table id="myTable" style="display:none">
    <tr>
        <th class="borderless">ID</th>
        <th>Name</th>
        <th>Username</th>
        <th>Gender</th>
        <th>Country</th>
    </tr>
    <tbody id="myTableBody">
    </tbody>
</table>
<button type="button" id="buttonShow" onclick="showTable()">Show Table</button>
<button type="button"  id="buttonAdd" onclick="addRow()" disabled>Add a new row</button>
<br>
<label>
    <input  class="input1" type="text" name="todoTags" placeholder="输入ID删除"/>
    <button class="dellbtn" id="buttonDell"onclick="delRow()" disabled>Delete row</button>
</label>

修改后的JavaScript

let rowIdCounter = 1; // 用于生成唯一行ID

function showTable(){
    document.getElementById("myTable").style.display = "block";
    document.getElementById("buttonAdd").disabled = false;
    document.getElementById("buttonDell").disabled = false;
}

// 补充addRow函数，生成带ID的测试行
function addRow() {
    const tbody = document.getElementById("myTableBody");
    const newRow = tbody.insertRow();
    
    // 给行设置唯一ID属性
    newRow.id = `row-${rowIdCounter}`;
    
    // 创建单元格并填充测试内容
    const cellId = newRow.insertCell(0);
    const cellName = newRow.insertCell(1);
    const cellUsername = newRow.insertCell(2);
    const cellGender = newRow.insertCell(3);
    const cellCountry = newRow.insertCell(4);
    
    cellId.textContent = rowIdCounter;
    cellName.textContent = `Name ${rowIdCounter}`;
    cellUsername.textContent = `user${rowIdCounter}`;
    cellGender.textContent = rowIdCounter % 2 === 0 ? "Female" : "Male";
    cellCountry.textContent = rowIdCounter % 2 === 0 ? "USA" : "Canada";
    
    rowIdCounter++;
}

// 实现delRow函数，根据输入的ID匹配并删除行
function delRow() {
    const input = document.querySelector('.input1');
    const targetId = input.value.trim();
    
    if (!targetId) {
        alert("请输入要删除的ID");
        return;
    }
    
    // 根据行ID查找目标行
    const targetRow = document.getElementById(`row-${targetId}`);
    
    if (targetRow) {
        targetRow.remove();
        input.value = ""; // 删除后清空输入框
    } else {
        alert("未找到对应ID的行");
    }
}

const btn = document.querySelector('.dellbtn')
const userTags = []

关键说明 #

1. 补充addRow函数：生成带有唯一ID标识的表格行，给<tr>元素设置id属性，同时将ID显示在第一个单元格，方便用户查看和输入。
2. 完善delRow函数：
   • 获取输入框内容并做非空校验，避免无效操作
   • 根据输入ID拼接行的id属性值，精准查找目标行
   • 找到行后执行删除，未找到则给出提示，删除成功后清空输入框优化体验

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