如何实现对内容在span/div标签中的HTML表格的筛选？

我来帮你搞定这个问题——你离成功只差两个小调整！问题主要出在表格ID不匹配，以及没有正确定位到存放场所信息的SPAN元素上。下面是修正后的完整代码和说明：

修正后的完整代码 #

搜索框（无需修改） #

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search here">

修正后的筛选脚本 #

function myFunction() {
    // 声明变量
    var input, filter, table, tr, targetSpan, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    // 匹配你实际的表格ID：exampletable
    table = document.getElementById("exampletable");
    tr = table.getElementsByTagName("tr");

    // 遍历所有表格行，隐藏不匹配搜索关键词的行
    for (i = 0; i < tr.length; i++) {
        // 精准定位到存放场所信息的SPAN标签（.placetext下的.text类）
        targetSpan = tr[i].querySelector(".placetext .text");
        if (targetSpan) {
            txtValue = targetSpan.textContent || targetSpan.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}

你的表格代码（保持原样即可） #

<table id="exampletable" class="table1">
    <tbody>
        <tr>
            <td class="placeicon">
                <img src="icon.png">
            </td>
            <td class="placetext">
                <div class="placecontrols">
                    <a href="examplemap.html"><img src="icon2.png"></a>
                </div>
                <span class="text">
                    <strong>Example Place</strong>
                    <br>Address 123
                    <br>Phone: 123456789
                </span>
            </td>
        </tr>
        <tr>...</tr>
        <tr>...</tr>
    </tbody>
</table>

关键修改说明 #

• 表格ID匹配：原来的脚本里错误地查找myTable，但你的表格实际ID是exampletable，这是最基础的匹配错误，必须修正。
• 精准定位目标元素：用querySelector(".placetext .text")直接定位到存放场所名称、地址、电话的SPAN标签，而不是取第一个仅包含图标的td内容。
• 跨浏览器兼容：保留textContent || innerText的写法，确保在不同浏览器中都能正常获取文本内容。

修改完成后，用户搜索场所名称、地址或电话时，都能准确筛选出对应的表格行。

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