使用 jQuery 隐藏 html 表的某些部分

Question

考虑以下片段：jQuery(".zoekopcat").on("keyup", function() {  var value = jQuery(this).val();  jQuery("table tr").each(function(index) {    if (index !== 0) {      row = jQuery(this);      var id = row.find("strong:contains(" + value + ")").text();      if (id.indexOf(value) !== -1) {        row.show();      } else {        row.hide();      }    }  });})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="text" class="zoekopcat"><table>  <tr>    <td colspan=7><strong>Face</strong</td>  </tr>  <tr>    <td>Product1</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>  </tr>   <tr>    <td>Product2</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>  </tr>  <tr>    <td colspan=7><strong>Hands</strong</td>  </tr>  <tr>    <td>Product1</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>  </tr>   <tr>    <td>Product2</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>    <td>...</td>  </tr></table>例如，如果我在搜索字段中输入“Face”，我希望它显示带有“Face”的 tr td 以及“Face”的产品 1 和 2，“Hands”的产品应该被隐藏......，如果我输入“手”、“脸”，它的产品应该被隐藏，等等......我已经有以下 jQuery 代码可以运行，但是如果我在搜索字段中输入“Face”，它会显示“Face”，但不会显示相应的产品 1 和 2....现在我应该也显示产品 1 和 2，并隐藏所有其余的......

Answer 1

这是一个使用 jquery 的解决方案.nextUntil。

1. 获取所有“标题”行（在本例中为strong第一个 td 中的行）

2. 找到与输入匹配的

3. 隐藏所有行（从头开始）

4. 循环遍历每个匹配的标题行

5. 使用 .nextUntil 查找下一个标题行（但不包括它（如“until”中））

6. 显示之间的行

$(".zoekopcat").on("keyup", function() {

  var val = $(this).val().toUpperCase();

  var headerRows = $("table tr td:first-child>strong").closest("tr");

  var matchRows = headerRows.filter((i,e) => 

                    $(e).text().toUpperCase().indexOf(val) >= 0);

  $("table tr").hide();

  matchRows.each(function() {

    $(this).show().nextUntil(headerRows).show();

  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="zoekopcat">

<table>

  <tr>

    <td colspan=7><strong>Face</strong></td>

  </tr>

  <tr>

    <td>Product1</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

  <tr>

    <td>Product2</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

  <tr>

    <td colspan=7><strong>Hands</strong></td>

  </tr>

  <tr>

    <td>Product1</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

  <tr>

    <td>Product2</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

</table>

Answer 2

data向行添加标识属性有很大帮助，并使 JavaScript 代码变得非常简单。

HTML：

<input type="text" class="zoekopcat">

<table>

  <tr data-category="Face">

    <td colspan="7"><strong>Face</strong></td>

  </tr>

  <tr data-category="Face">

    <td>Product1</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

   <tr data-category="Face">

    <td>Product2</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

  <tr data-category="Hands">

    <td colspan="7"><strong>Hands</strong></td>

  </tr>

  <tr data-category="Hands">

    <td>Product3</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

   <tr data-category="Hands">

    <td>Product4</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

</table>

JavaScript：

jQuery(".zoekopcat").on("keyup", function() {

  var value = jQuery(this).val();

  jQuery("table tr").each(function() {

    var rowCat = $(this).data('category');

    if (rowCat.toLowerCase().indexOf(value.toLowerCase()) !== -1) {

        $(this).show();

    } else {

        $(this).hide();

    }

  });

});

现场演示：https://jsfiddle.net/bkxLf3p0/

编辑：我添加toLowerCase()了字符串比较（=不区分大小写的搜索），因为它对我来说似乎很有用

Answer 3

首先，我修复了 HTML 中的一个小错误，即strong标签未正确终止。此外，我删除了对第一行的检查，因为这意味着Face无论搜索值如何，都会始终显示第一行。

为了解决这个问题，我使用一个布尔变量shouldShow来指示是否应显示当前行。

该代码像以前一样迭代表行，然后验证当前行是否包含标签strong。如果是，它会确定这是否与正在搜索的内容匹配并进行shouldShow适当的设置。

shouldShow然后用于确定是显示还是隐藏该行。请参阅下面的工作片段：

jQuery(".zoekopcat").on("keyup", function() {

  var value = jQuery(this).val();

  var shouldShow = false;

  

  jQuery("table tr").each(function(index) {

    row = jQuery(this);

    if (row.find("strong").length) {

      var id = row.find("strong:contains(" + value + ")").text();

      if (id.indexOf(value) !== -1) {

        shouldShow = true;

      } else {

        shouldShow = false;

      }

    }

    

    if (shouldShow) {

      row.show();

    } else {

      row.hide();

    }

  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="zoekopcat">

<table>

  <tr>

    <td colspan=7><strong>Face</strong></td>

  </tr>

  <tr>

    <td>Product1</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

  <tr>

    <td>Product2</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

  <tr>

    <td colspan=7><strong>Hands</strong></td>

  </tr>

  <tr>

    <td>Product1</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

   <tr>

    <td>Product2</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

</table>