使用 java-script 在 html 表中的多个索引上搜索字段

Question

我的应用程序中有以下 Html 表

  <table class="table table-striped table-hover table-bordered" id="sample_editable_1">
        <thead>
            <tr>
                <th>Id</th>
                <th>User Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Phone Number</th>
                <th>Gender</th>

            </tr>
        </thead>
        <tbody>
            @foreach($user as $users)
            <tr>
                <td>{{$users['id']}}</td>
                <td>{{$users['user_name']}}</td>
                <td>{{$users['first_name']}}</td>
                <td>{{$users['last_name']}}</td>
                <td>{{$users['phone_no']}}</td>
                <td>{{$users['gender']}}</td>
                @endforeach
        </tbody>
    </table>

我已经编写了以下 JavaScript 用于在此表中进行搜索

  <script>
  function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("sample_editable_1");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
  td = tr[i].getElementsByTagName("td")[1];
  if (td) {
  if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
  } else {
    tr[i].style.display = "none";
     }
    }       
  }
}
</script>

此特定代码适用于单个索引，例如 td = tr[i].getElementsByTagName("td")[0] 或 [1] 我怎么能使其适用于任何用户搜索表都应显示与输入匹配的所有内容的场景？

Answer 1

就像你循环你的 trs 一样，你应该循环你的 tds：

function myFunction() {
    var input, filter, table, tr, td, i, ii;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("sample_editable_1");
    tr = table.querySelectorAll("tbody tr");
    for (i = 0; i < tr.length; i++) {
        var tds = tr[i].getElementsByTagName("td");
        var found = false;
        for (ii = 0; ii < tds.length && !found; ii++) {
            if (tds[ii].textContent.toUpperCase().indexOf(filter) > -1) {
                found = true;
                break;
            }
        }
        tr[i].style.display = found?"":"none";
    }
}

提示：保持缩进干净，textContent 更适合这种情况。

不要尝试搜索tr[i].textContent，因为这会连接列内容，因此如果last_name 列有“juan”并且phone_no 列有“0411”，搜索“an04”将返回正数。我猜你不希望这种情况发生。最好单独搜索每列内容。