显示/隐藏表格中的多行

Question

我有这张表，其中有不同类的行，然后是按钮的复选框。
当我单击其中一个按钮 ie option1btn 时，我希望显示所有具有 option1 类的行，如果我单击 option2btn，我希望所有具有类 @987654324 的行@ 要显示，等等。
可以选择多个按钮以显示多个选项。

这是一个代码示例：

<input id="option1btn" type="checkbox"> 
<input id="option2btn" type="checkbox"> 
<input id="option3btn" type="checkbox"> 
<input id="option4btn" type="checkbox">

<table id="optionTable">
    <tr class="option1">
        <td></td>
    </tr>
    <tr class="option1">
        <td></td>
    </tr>
    <tr class="option2 option4">
        <td></td>
    </tr>
    <tr class="option1 option4">
        <td></td>
    </tr>
    <tr class="option4">
        <td></td>
    </tr>
    <tr class="option1 option3 option4">
        <td></td>
    </tr>
    <tr class="option4">
        <td></td>
    </tr>
</table>

我目前使用 css 为奇数/偶数行添加不同的背景颜色。希望它能够工作，以便它在当前显示的行上应用颜色，这样我就不会有两行具有相同的颜色。

Answer 1

由于你不知道从哪里开始，我会一点一点地解释。
你想实现一个表格过滤器。功能要求是：

• 选中复选框时，对应的行应该是可见的。
• 当未选中复选框时，应隐藏相应的行，仅当没有其他选中的复选框对应于这些行时。

如果不是斜体部分，您可以只使用show 和hide。当未选中复选框时，您必须首先检查该行具有哪些其他选项类，然后使用flag variable（在下面的示例中为hide）决定是否应该切换它。 为了便于使用，请将<input type="checkbox"> 值属性映射到每个应该切换的行的类名：

<input id="option1btn" type="checkbox" value="option1">
<input id="option2btn" type="checkbox" value="option2"> 
<input id="option3btn" type="checkbox" value="option3"> 
<input id="option4btn" type="checkbox" value="option4">

这是代码。不确定您对 JS/jQuery 的熟悉程度，但这是理解答案所需的知识（别担心，这些是 2 分钟的阅读时间）：jQuery and 'this'、jQuery Attribute 'starts with' selector、jQuery variable naming convention、JS Element.classList。

var $options = $('[id^="option"]');
$options.on('change', function() {
  var $elementsToToggle = $('.' + this.value); // e.g. '.option3'
  if (this.checked) {
    // showing is simple
    $elementsToToggle.show();
  } else {
    // hiding must be done on a per-row basis
    $elementsToToggle.each(function() {
      var hide = true,
          elementToToggle = this;
      // check whether other checked filters should keep the row visible
      $options.each(function() {
        var checkbox = this,
            optionClass = checkbox.value,
            optionIsChecked = checkbox.checked;
        if (elementToToggle.classList.contains(optionClass) && optionIsChecked)
          hide = false;
      });

      if (hide === true)
        $(elementToToggle).hide();
    });
  }
});

DEMO

（注意：为了方便检查正确性，我将行文本替换为选项类）

Answer 2

我用过 Jquery 看看这个

HTML

<input id="option1btn" type="checkbox"> 
<input id="option2btn" type="checkbox"> 
<input id="option3btn" type="checkbox"> 
<input id="option4btn" type="checkbox">

<table id="optionTable">
    <tr class="option1">
        <td>a</td>
    </tr>
    <tr class="option1">
        <td>b</td>
    </tr>
    <tr class="option2 option4">
        <td>c</td>
    </tr>
    <tr class="option1 option4">
        <td>d</td>
    </tr>
    <tr class="option4">
        <td>e</td>
    </tr>
    <tr class="option1 option3 option4">
        <td>f</td>
    </tr>
    <tr class="option4">
        <td>g</td>
    </tr>
</table>

CSS

.option1,.option2,.option3,.option4 {
  display: none;
}
.show {
  display: block;
}

jQuery

$("#option1btn").on('click',function() {
console.log("asas");
    $('.option1').toggleClass('show');
})
$("#option2btn").on('click',function() {
    $('.option2').toggleClass('show');
})
$("#option3btn").on('click',function() {
    $('.option3').toggleClass('show');
})
$("#option4btn").on('click',function() {
    $('.option4').toggleClass('show');
})

工作 JS 小提琴

https://jsfiddle.net/ckdc53wv/

Answer 3

  <script type="text/javascript">

      var checkCounter = {};
      var regExp = /^(option[0-9])btn$/;

      $("input[type='checkbox']").click(function(e) {

        var matches = regExp.exec($(this).attr("id"));
        var checkbox = this;
        var isChecked = $(this).is(":checked");

        $('#optionTable tr').each(function() {

          var rowIndex = $(this).index();
          var row = this;

          if (isNaN(checkCounter[rowIndex])) { checkCounter[rowIndex] = 0; }

          if ($(row).hasClass(matches[1])) {

            if (isChecked) {
              checkCounter[rowIndex] += 1;
              $(row).hide();
            } else {
              checkCounter[rowIndex] -= 1;
              if(checkCounter[rowIndex] == 0) {
                $(row).show();
              }
            }
          }
        });
      });
  </script>