如何在 html 表中搜索任意列？

Question

我想通过使用任何列（例如“标题”或“开始日期”或“可见”等）在此表中进行过滤或搜索，现在我的代码通过第一个列“标题”进行搜索，但我无法使其在所有列 https://datatables 中进行搜索。 net/examples/data_sources/dom.html这正是我想要的

<div>
    <label>
        Search:<input type="text" id="Search" onkeyup="myFunction()" placeholder="search for performance">
    </label>
</div>
<table id="PerformanceTable" class="table table-bordered table-striped">

    <tr>
        <th>
            Title
        </th>
        <th>
            Start Date
        </th>
        <th>
            Booking
        </th>
        <th>
            Visible
        </th>
        <th>
            Featured
        </th>
        <th>
            Event
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Views)
        </th>
        <th></th>
    </tr>
</table>
<script>
    function myFunction() {
        // Declare variables
        var input, filter, table, tr, td, i;
        input = document.getElementById("Search");
        filter = input.value.toUpperCase();
        table = document.getElementById("PerformanceTable");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the        search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

    }</script>

Answer 1

去除.getElementsByTagName("td")[]

for 循环应该是这样的：

for (i = 1; i < tr.length; i++) {
  td = tr[i];
  if (td) {
    txtValue = td.textContent || td.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
  }
}