Show/hide multiple rows in a table

Question

I have this table that have rows with different classes and then checkboxes for buttons.
When I click one of the buttons, i.e. option1btn, I want all the rows with the class option1 to be shown, if I click option2btn, I want rows all with class option2 to be shown, and so on.
More then one buttons can be selected to show more then one options.

Here is a code example:

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

I currently use css to add different background color to odd/even rows. Would like that to work so that it applies the colors on the rows currently shown so I won't have two rows with the same color.

The question is tagged jQuery.. Perhaps show us your jQuery code? — webketje, Feb 10 '18 at 11:12
Well. I don't have one. Perhaps it is wrong of me to have others write the whole thing for me but right now I don't know where to start. Have looked around but haven't found something that works the way I want it, with multiple rows with same class. Looking at jQuery now to understand it more but I haven't really worked with it before. — MAlgol, Feb 10 '18 at 11:17

score 0 · Answer 1 · answered Feb 10 '18 at 11:43

I have used Jquery check this out

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

Working JS fiddle

https://jsfiddle.net/ckdc53wv/

So can you please bit more clear i can give you the exact code what you are looking for — Kannan T, Feb 10 '18 at 17:05
I notice a strange effect with this. When I have more columns in the table all the rows end up in the first one. — MAlgol, Feb 11 '18 at 08:14

score 0 · Accepted Answer · answered Feb 10 '18 at 20:30

Since you didn't know where to start, I'll explain bit by bit.
You want to implement a table filter. Functional requirements are:

When a checkbox is checked, the corresponding rows should be visible.
When a checkbox is unchecked, the corresponding rows should be hidden, only if no other checked checkbox corresponds to those rows.

If it weren't for the part in italics, you could just show and hide. When a checkbox is unchecked you have to check first which other option classes the row has, and, using a flag variable (hide in the example below), decide whether it should be toggled. For ease of use, map the <input type="checkbox"> value attribute to the classname of the rows each should toggle:

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

And here's the code. Not sure how familiar you are with JS/jQuery but this is required knowledge to understand the answer (don't worry, these are 2minute reads): 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

(note: for easily checking correctness I replaced the row text with the option classes)

This demo seems to work as I want it. Will try to decipher the code to get it to work with what I have. — MAlgol, Feb 11 '18 at 08:39
@MAlgol Could you then [accept the answer](https://stackoverflow.com/help/someone-answers)? — webketje, Feb 11 '18 at 10:30

devrow · Answer 3 · 2018-02-10T14:58:18.787

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

Show/hide multiple rows in a table

3 Answers3

DEMO