Question

有过滤我的表的问题。如果搜索在其各自的单元格中出现任何匹配，我希望整行可见。目前它只显示确切的细胞。

<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>

我在MySqli表中使用这种格式。

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

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

console.log(contains('the cell name', 'name')); //true
console.log(contains('the cell name', 'na')); //true 
console.log(contains('the cell name', 'th')); //true
console.log(contains('the cell name', 't')); //true
console.log(contains('the cell name', 'the cell')); //true
console.log(contains('the cell name', 'help')); //false
console.log(contains('the cell name', '')); //true
console.log(contains('the cell name', 'blue forty two')); //false

这些结果让我相信，一旦找到具有子字符串匹配的单元格，就应该退出for循环。

Answer 2

您应该分别循环遍历行和单元格。在行循环中，默认隐藏行。然后，当您遍历单元格时，如果任何单元格与搜索文本匹配，则显示该行。

$("#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>

在$.each中，从迭代函数返回false告诉jQuery停止循环。

Javascript，搜索/过滤sqli表问题

2 个答案: