如何使javascript搜索表中的多个列和行

I am trying to figure out how to make all 5 columns and rows searchable. At the moment it only searches via the first column (DATE). Could someone please assist me with possibly making it search all the columns and rows please? I have included the HTML, CSS and javascript to try to provide as much information as possible.

我试图弄清楚如何使所有5列和行可搜索。目前它只通过第一列（DATE）进行搜索。有人可以请你协助我搜索所有的列和行吗？我已经包含了HTML，CSS和javascript，试图提供尽可能多的信息。

function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  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";
      }
    } 
  }
}

#myInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
    border-collapse: collapse; /* Collapse borders */
    width: 100%; /* Full-width */
    border: 1px solid #ddd; /* Add a grey border */
    font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
    text-align: left; /* Left-align text */
    padding: 12px; /* Add padding */
}

#myTable tr {
    /* Add a bottom border to all table rows */
    border-bottom: 1px solid #ddd; 
}

#myTable tr.header, #myTable tr:hover {
    /* Add a grey background color to the table header and on hover */
    background-color: #f1f1f1;
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:20%;">Date</th>
    <th style="width:20%;">Home</th>
    <th style="width:20%;">Time</th>
    <th style="width:20%;">Away</th>
    <th style="width:20%;">City</th>
    
  </tr>
  <tr>
    <td>08/01/2018</td>
    <td>SPAIN</td>
    <td>16:30 ET</td>
    <td>USA</td>
    <td>BARCELONA</td>
  </tr>
    <tr>
    <td>08/02/2018</td>
    <td>BOLIVIA</td>
    <td>18:30 ET</td>
    <td>PORTUAL</td>
    <td>MADRID</td>
  </tr>
      <tr>
    <td>08/03/2018</td>
    <td>PUERTO RICO</td>
    <td>18:30 ET</td>
    <td>CANADA</td>
    <td>CHICAGO</td>
  </tr>
      <tr>
    <td>08/04/2018</td>
    <td>MEXICO</td>
    <td>19:30 ET</td>
    <td>ENGLAND</td>
    <td>LONDON</td>
  </tr>
</table>

2 个解决方案

#1

Using your existing code, loop through the table cells just as you loop through the table rows.

使用现有代码，循环遍历表格单元格，就像循环遍历表格行一样。

Below, I hide each row. For each row, if text in a cell matches the search term, that row is shown and the loop continues to the next row.

下面，我隐藏每一行。对于每一行，如果单元格中的文本与搜索项匹配，则显示该行，并且循环继续到下一行。

I'm also ignoring the table header by using tBodies to limit the search to <tr> elements that are within the first <tbody>. Alternatively, you could check that <td> elements exist in the row before searching; something like: if (tds.length) > 0.

我也忽略了表头，使用tBodies将搜索限制在第一个内的元素。或者，您可以在搜索之前检查行中是否存在元素;类似于：if（tds.length）> 0。

function myFunction() {

  // Declare variables 
  var input = document.getElementById("myInput");
  var filter = input.value.toUpperCase();
  var table = document.getElementById("myTable");
  var trs = table.tBodies[0].getElementsByTagName("tr");

  // Loop through first tbody's rows
  for (var i = 0; i < trs.length; i++) {

    // define the row's cells
    var tds = trs[i].getElementsByTagName("td");

    // hide the row
    trs[i].style.display = "none";

    // loop through row cells
    for (var i2 = 0; i2 < tds.length; i2++) {

      // if there's a match
      if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {

        // show the row
        trs[i].style.display = "";

        // skip to the next row
        continue;

      }
    }
  }

}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;
}

#myTable th {
  width: 20%;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  background-color: #f1f1f1;
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <thead>
    <tr class="header">
      <th>Date</th>
      <th>Home</th>
      <th>Time</th>
      <th>Away</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>08/01/2018</td>
      <td>SPAIN</td>
      <td>16:30 ET</td>
      <td>USA</td>
      <td>BARCELONA</td>
    </tr>
    <tr>
      <td>08/02/2018</td>
      <td>BOLIVIA</td>
      <td>18:30 ET</td>
      <td>PORTUAL</td>
      <td>MADRID</td>
    </tr>
    <tr>
      <td>08/03/2018</td>
      <td>PUERTO RICO</td>
      <td>18:30 ET</td>
      <td>CANADA</td>
      <td>CHICAGO</td>
    </tr>
    <tr>
      <td>08/04/2018</td>
      <td>MEXICO</td>
      <td>19:30 ET</td>
      <td>ENGLAND</td>
      <td>LONDON</td>
    </tr>
  </tbody>
</table>

#2

When you do tr[i].getElementsByTagName("td")[0];, you only select the date column, wich is why it only search in that one. You are going to have to loop through all the coumn and set a boolean to true if you find it at least once.

当你执行tr [i] .getElementsByTagName（“td”）[0];时，你只选择日期列，这就是为什么它只搜索那个。如果你发现它至少一次，你将不得不循环遍历所有coumn并将布尔值设置为true。

Something like that:

像这样的东西：

var found = false;
var td = tr[i].getElementsByTagName("td");
for(j = 0; j < td.length; j++) {
    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
        //if found at least once it is set to true
        found = true;
    }
}
//only hides or shows it after checking all columns
if(found){
    tr[i].style.display = "";
} else {
    tr[i].style.display = "none";
}