javascript搜索仅适用于一个（第一）列，而不适用于整个html表

Question

I've been trying to use search and filter options but seems like the search option is working for only the first column ie" ID " . I would like it to work for all the columns specially the names and pincode column. Any help is appreciated. Thank you!

PHP

<div class="table">
          <h3 class="page-header">Agents Table</h3>
          <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="type in a name">
          <table id="grid-basic" class="table table-condensed table-hover table-striped">
            <thead>
              <tr>
                <th data-column-id="id" data-type="numeric">ID</th>
                <th data-column-id="name">Agent's Name</th>
                <th data-column-id="contact">Contact</th>
                <th data-column-id="location">Location</th>
                <th data-column-id="pin">PIN</th>
                <th data-column-id="action">Action</th>
              </tr>
            </thead>
            <?php
            $stmt = $con->prepare("SELECT * FROM agents ORDER BY id ASC");
            $stmt ->execute();
            $results = $stmt->fetchAll();
            foreach($results as $row){
              ?>
              <tbody>
                <tr>
                  <td><?=$row['id'];?></td>
                  <td><?=$row['name'];?></td>
                  <td><?=$row['contact'];?></td>
                  <td><?=$row['location'];?></td>
                  <td><?=$row['pin'];?></td>
                  <td><?php echo '<a href="agentlog.php?id='.$row['name'].'"><button type="button" class="btn btn-primary btn-md" >View</button></a>';?></th>
                  </tr>
                </tbody>
                <?php
              }
              ?>
            </table>
          </div>

JavaScript

<script type="text/javascript">
      function myFunction() {
        var input, filter, table, tr, td, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("grid-basic");
        tr = table.getElementsByTagName("tr");
        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

In your code, you loop all the TR and only the first TD (the ID column).

td = tr[i].getElementsByTagName("td")[0]; // [0] this select the first TD

The solution is a loop through all TD of TR

for (j = 0; j < tr[i].getElementsByTagName("td").length; j++) {
  var td = tr[i].getElementsByTagName("td")[j];
  if (td) {
    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
      found = true; // If you find the text just once then...
    }
  }
}

The working code

Try to search "alexa"...

 function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("grid-basic"); tr = table.getElementsByTagName("tr"); for (i = 1; i < tr.length; i++) { // from 1, not header tr[i].style.display = ""; var found = false; for (j = 0; j < tr[i].getElementsByTagName("td").length; j++) { var td = tr[i].getElementsByTagName("td")[j]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { found = true; } } } if (found) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } 

 <div class="table"> <h3 class="page-header">Agents Table</h3> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="type in a name"> <table id="grid-basic" class="table table-condensed table-hover table-striped"> <thead> <tr> <th data-column-id="id" data-type="numeric">ID</th> <th data-column-id="name">Agent's Name</th> <th data-column-id="contact">Contact</th> <th data-column-id="location">Location</th> <th data-column-id="pin">PIN</th> <th data-column-id="action">Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Alex</td> <td>33333373</td> <td>World</td> <td>123456</td> <td><a href="agentlog.php?id=name"><button type="button" class="btn btn-primary btn-md" >View</button></a></td> </tr> <tr> <td>2</td> <td>Alexander</td> <td>566656456</td> <td>Europe</td> <td>789456</td> <td><a href="agentlog.php?id=name"><button type="button" class="btn btn-primary btn-md" >View</button></a></td> </tr> </tbody> </table> </div> 

Answer 2

You may need to loop through all the td elements, you are only picking first.

for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    for(j=0;j<td.length;j++)
        if (td[j]) {
            // Here you will have access to all cells in the table.
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }  
}

Answer 3

Looks like problem is here:

    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";
        }
      }
    }

Try to replace the code above with this:

    var columns; // Array with all the <td>'s, found in the row
    for (i = 0; i < tr.length; i++) {
        columns = tr[i].getElementsByTagName("td");

        // Iterate through all the found columns
        for (var j = 0; j < columns.length; j++) {
            // Make search in each column
            td = columns[j];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }