HTML表格行搜索匹配高亮残留问题咨询及解决方案求助

问题情况 #

你在实现HTML表格的行搜索匹配高亮功能时遇到问题：删除搜索字符后，<mark>高亮标记仍残留。此前按列实现该功能运行正常，改为按行搜索后出现异常。

问题原因 #

• 原始文本丢失：每次搜索时直接修改td.innerHTML，覆盖了单元格的原始纯文本内容。当搜索词删除后，无法恢复到最初的无标记状态，只能基于已带<mark>的内容继续处理，导致标记残留。
• 逻辑漏洞：代码仅在找到匹配时修改单元格内容，未处理搜索词为空或无匹配的清除高亮场景；同时存在索引错误，tr[j].style.display中的j是单元格索引，应改为行索引i（即tr[i].style.display）。

解决办法 #

核心思路是保留原始文本，每次搜索前先恢复单元格的初始内容，再根据当前搜索词重新生成高亮内容。

步骤1：存储原始文本 #

页面加载时，把每个td的原始文本存入自定义属性data-original，后续可随时调用恢复。

步骤2：修正搜索逻辑 #

• 每次执行搜索前，先从data-original取出原始文本恢复单元格内容
• 处理搜索词为空的场景：直接恢复所有原始文本，无需高亮
• 修复行显示的索引错误，优化匹配逻辑

完整代码 #

HTML（保持原结构即可）

<body>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

    <table id="myTable">
        <tr class="header">
            <th> First Name </th>
            <th> Last Name </th> 
            <th> Age </th>
            <th> Language </th>
        </tr>
        <tr>
            <td>John</td>
            <td>Kole</td>
            <td>18</td>
            <td>English</td>
        </tr>
        <tr>
            <td>Pearl</td>
            <td>Shine</td>
            <td>50</td>
            <td>Hindi</td>
        </tr>
       <tr>
            <td>Jacob</td>
            <td>Pool</td>
            <td>22</td>
            <td>Arabic</td>
       </tr>
       <tr>
            <td>David</td>
            <td>Struff</td>
            <td>30</td>
            <td>German</td>
       </tr>
    </table>
</body>

JavaScript

// 页面加载完成后，存储每个td的原始文本
document.addEventListener('DOMContentLoaded', function() {
    const tds = document.querySelectorAll('#myTable td');
    tds.forEach(td => {
        td.dataset.original = td.textContent.trim();
    });
});

function myFunction() {
    const input = document.getElementById("myInput");
    const filter = input.value.toUpperCase().trim();
    const table = document.getElementById("myTable");
    const trs = table.getElementsByTagName("tr");

    for (let i = 0; i < trs.length; i++) {
        const tr = trs[i];
        if (tr.classList.contains('header')) continue; // 跳过表头行

        const tds = tr.getElementsByTagName("td");
        let isFound = false;
        tr.style.display = "";

        // 先恢复当前行所有td的原始文本，清除之前的高亮
        for (let j = 0; j < tds.length; j++) {
            const td = tds[j];
            td.textContent = td.dataset.original;
        }

        // 搜索词为空时，直接跳过高亮处理
        if (!filter) continue;

        // 遍历当前行的单元格，查找匹配内容
        for (let j = 0; j < tds.length; j++) {
            const td = tds[j];
            const originalText = td.dataset.original;
            const txtValue = originalText.toUpperCase();
            const index = txtValue.indexOf(filter);

            if (index > -1) {
                // 拼接带高亮标记的HTML内容
                const highlightedContent = 
                    originalText.substring(0, index) + 
                    `<mark>${originalText.substring(index, index + filter.length)}</mark>` + 
                    originalText.substring(index + filter.length);
                td.innerHTML = highlightedContent;
                isFound = true;
                break; // 找到一个匹配就停止当前行的单元格遍历
            }
        }

        // 无匹配项时隐藏该行（可根据需求注释掉此行）
        if (!isFound) {
            tr.style.display = "none";
        }
    }
}

关键优化点 #

• 原始文本持久化：通过data-original属性保存单元格初始内容，避免修改innerHTML导致原始数据丢失
• 先恢复再处理：每次搜索前清空之前的高亮，确保基于原始文本重新生成高亮，彻底解决标记残留
• 修复逻辑错误：修正行显示的索引错误，优化空搜索词的处理逻辑
• 性能优化：找到匹配后立即停止当前行的单元格遍历，减少不必要的循环

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