Question

我的这个表有不同类的行，然后是按钮的复选框当我单击其中一个按钮 ie option1btn时，我希望显示所有包含option1类的行，如果我点击option2btn，我想要所有要显示的课程option2，依此类推。
可以选择多个按钮来显示多个选项。

这是一个代码示例：

<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

我用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 2

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

选中复选框后，相应的行应该可见。
如果未选中复选框，则应隐藏相应的行，仅当没有其他选中的复选框对应于这些行时才显示。

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

<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，{ {3}}

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();
    });
  }
});

JS Element.classList

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

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>

显示/隐藏表格中的多行

3 个答案:

JS Element.classList