Javascript，搜索/过滤sql表问题

Question

having issues with filtering my table. I want the entire row to be visible if the search comes up with any matches in its respective cells. Currently it is only showing exact cells.

<input type="text" id="searchText" />
  <script type="text/javascript">
    function contains(text_one, text_two) {
      if (text_one.indexOf(text_two) != -1)
        return true;
    }

    $("#searchText").keyup(function () {
      var searchText = $("#searchText").val().toLowerCase()
      $("tr td").each(function () {
        if (!contains($(this).text().toLowerCase(), searchText))
          $(this).hide();
        else
          $(this).show();

      });;
    });;
  </script>

Im using this format for my MySqli table.

while($row = mysqli_fetch_array($result1, MYSQLI_ASSOC)):?>


<table border="1">
<!--<table class="fixed" border="1" cellpadding="1" cellspacing="1"> -->
  <col width="100px" />
  <col width="100px" />
  <col width="100px" />
  <col width="100px" />
  <col width="100px" /><tr>
    <td><?php echo $row['id'];?></td>
    <td><?php echo $row['name'];?></td>
    <td><?php echo $row['posted'];?></td>
    <td><?php echo $row['category'];?></td>
    <td><?php echo $row['more'];?></td>
</tr>

<?php endwhile;

?>

</table>

Answer 1

You should loop over rows and cells separately. In the row loop, hide the row by default. Then when you loop over the cells, show the row if any of the cells matches the search text.

$("#searchText").keyup(function() {
  var searchText = $("#searchText").val().toLowerCase()
  $("tr").each(function() {
    var row = $(this);
    row.hide();
    $("td", row).each(function() {
      if (contains($(this).text().toLowerCase(), searchText)) {
        row.show();
        return false; // no need to keep looping over cells in this row
      }
    });
  });
});

function contains(text_one, text_two) {
  if (text_one.indexOf(text_two) != -1)
    return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchText">
<table border="1">
  <tr>
    <td>Row 1 Field 1 abc</td>
    <td>Row 1 Field 2 def</td>
    <td>Row 1 Field 3 ghi</td>
  </tr>
  <tr>
    <td>Row 2 Field 1 jkl</td>
    <td>Row 2 Field 2 def</td>
    <td>Row 2 Field 3 pqr</td>
  </tr>
  <tr>
    <td>Row 3 Field 1 abc</td>
    <td>Row 3 Field 2 vwx</td>
    <td>Row 3 Field 3 yz</td>
  </tr>
</table>

In $.each, returning false from the iteration function tells jQuery to stop looping.

</div>