Home>

When you press the button, the class name is added to theof a specific column in the table tag,
I want the same class name to be added to thecolumn directly below and hidden.
Also, when the class name ofattached at the beginning is deleted, the class name attached toin the same column is also deleted.
I want it to be, but I don't know how to write it.

I don't know how to get a specific column and add the class name to a specific element in it.
Corresponding source code
<!-Checkbox->
<Ul>
<Li>
<Label for = "item-1"><input type = "checkbox" value = "1">Item 1</label>
</Li>
<Li>
<Label for = "item-2"><input type = "checkbox" value = "2">Item 2</label>
</Li>
</Ul>

<!-Button->
<button>Run</button>
<button>Reset</button>

<table>
<thead>
 <tr>
   <td></td>
   <th data-selection = "1">Item 1-1</th>
   <th data-selection = "1">Item 1-2</th>
   <th data-selection = "2">Item 2-1</th>
 </tr>
</header>
<tbody>
 <tr>
   <th>Text A</th>
   <td>Text A-1</td>
   <td>Text A-2</td>
   <td>Text A-3</td>
 </tr>
 <tr>
   <th>Text B</th>
   <td>Text B-1</td>
   <td>Text B-2</td>
   <td>Text B-3</td>
 </tr>
</tbody>
</table>
.hide {
    display: none;
}
$(function () {
  $('.execution'). click (function () {
// Check item 1 and press the execute button to display only item 1
    if ($('[value = "1"]'). prop ('checked')) {
      $('[data-selection = "2"]'). addClass ('hide')
      $('[data-selection = "1"]'). removeClass ('hide')
    };
// Check item 2 and press the execute button to display only item 2
   if ($('[value = "2"]'). prop ('checked')) {
     $('[data-selection = "1"]'). addClass ('hide')
     $('[data-selection = "2"]'). removeClass ('hide')
   };
// Check both and press the execute button to display all
   if ($('[value = "1"]'). prop ('checked')&&$('[value = "2"]'). prop ('checked')) {
     $('[data-selection = "1"]'). removeClass ('hide')
     $('[data-selection = "2"]'). removeClass ('hide')
     $('tbody td'). removeClass ('hide')
    };
  })
});
// Press the reset button to display all
$(function () {
  $('.reset'). click (function () {
    $('[data-selection = "1"]'). removeClass ('hide')
    $('[data-selection = "2"]'). removeClass ('hide')
    $('tbody td'). removeClass ('hide')
    $('[type = "checkbox"]'). prop ('checked', false);
  })
});
What I tried
$(function () {
  $('.execution'). click (function () {
  var hide = $('.hide');
  var col_no = $(hide) .index ('thead th');
  var temp = "";
    $('td'). each (function (index, element) {
      for (var i = 1;i<($("tbody"). children (). length + 1);i ++) {
      var grp = $("tr: eq (" + i + ") td: eq (" + col_no + ")");
      $(grp) .addClass ("hide");
      }
    });
  })
});
What I tried

When I press the run button, only the 0th column with the hide class disappears.
I think you can use each () to hide multiple columns with the hide class.
It doesn't work.
Also, even if thethat disappeared by pressing another button is restored, thewill not be displayed again.
I don't know how to write it, including switching.

Thanks for your cooperation.

  • Answer # 1

    If you can devise a little more for HTML, you can make it easier for JS code, but if you want to work with HTML as it is, you should be able to do it in the following way.
    The reset method works fine with the code as it is presented, but it can be made shorter, so I rewrote it for your reference.

    $(function () {
        // Press the execute button to hide the corresponding column
        $('.execution'). click (function () {
            let values ​​= [], // Store the checked checkbox values
                col_index = [];// Store column index
            // Get the value of the checked checkbox
            $('[type = "checkbox"]: checked'). each (function () {
                values.push (parseInt ($(this) .val ()));
            });
            // If the checkbox is checked, get the index of the corresponding column
            if (values) {
                $('thead tr'). children (). each (function (index, element) {
                    if ($.inArray ($(element) .data ('selection'), values)! = -1) {
                        col_index.push (index);
                    }
                });
                // For all rows, add hide class to the corresponding column
                $.each (col_index, function (index, value) {
                    $('tr'). each (function () {
                        $(this) .children (). eq (value) .addClass ('hide');
                    });
                });
            }
        });
        // Press the reset button to display all
        $('.reset'). click (function () {
            $('.hide'). removeClass ('hide');
            $('[type = "checkbox"]'). prop ('checked', false);
        });
    });

  • Answer # 2

    Good evening.

    Those who getindex ()I think it's okay. (I think it's wrong to refer to this ...)
    For those who set.eq ()How about using?

    .eq () | jQuery API Documentation

    Also, when erasing multiple columns,.each ()I think you will need.

    .each () | jQuery API Documentation