javascript - 如何使用不同的列在 HTML 表格中进行搜索？

Question

我使用 JavaScript 函数过滤掉表格的行。但是，每当我输入任何内容时，所有表行都会消失。它似乎在寻找我在错误栏中搜索的单词。如何使函数在“doorName”列中显示？

搜索功能：

function SearchFunction() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("doorTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}

表的“th”标签：

<table class="table" id="doorTable" style="color:white">
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="CheckAll" onclick="UnCheckAll()"/>
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CloseRight)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.OpenRight)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.doorName)
            </th>

表的“td”标签：

<tr id="ScaleLine">
                <td>
                    <input type="checkbox" id="boxCheck" class="doorNameBoxes" value=@Html.DisplayFor(modelItem => item.doorName)>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CloseRight)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.OpenRight)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.doorName)
                </td>

我想在“doorName”列中搜索。

标签： javascripthtml