Select and Deselect Table Rows in Jquery?

Question

I need to know how to select/deselect Table Rows using jQuery.

Currently I am doing it like this, which is not very good, as I am aware of:

            var selected0 = false;
            var selected1 = false;
            var selected2 = false;
            var selected3 = false;
            $('#0').on('click', function () {
                if (selected0) {
                    $(this).css('background-color', 'white');
                    selected0 = false;
                }
                else {
                    $(this).css('background-color', 'rgba(255,0,0,0.4');
                    selected0 = true;
                }
            });
            $('#1').on('click', function () {
                if (selected1) {
                    $(this).css('background-color', 'lightgrey');
                    selected1 = false;
                }
                else {
                    $(this).css('background-color', 'rgba(255,0,0,0.4');
                    selected1 = true;
                }
            }); $('#2').on('click', function () {
                if (selected2) {
                    $(this).css('background-color', 'white');
                    selected2 = false;
                }
                else {
                    $(this).css('background-color', 'rgba(255,0,0,0.4');
                    selected2 = true;
                }
            }); $('#3').on('click', function () {
                if (selected3) {
                    $(this).css('background-color', 'lightgrey');
                    selected3 = false;
                }
                else {
                    $(this).css('background-color', 'rgba(255,0,0,0.4');
                    selected3 = true;
                }

Addition: Also, is there any way to check if at least one of them is selected in an easy way? I would need to be able to hide/show a button if one of them is clicked.

Thank you in advance.

Answer 1

Try using .on with a delegated event handler, you can handle events from descendant elements with it. Get the count of elements with length.

$(function() {
    $('#my-table').on('click', 'tr', function() {
      // Toggle class on <tr>
      $(this).toggleClass('selected');
      // Count selected <tr>
      const numItems = $('tr.selected').length;
      $('#message span').text(numItems);
      // Do sth if more than one <tr> is already selected
      if(numItems > 0) {
        console.log("Yeehaw.");
      }
    });
});

.selected:not(.table-header) {
  background-color: rgba(0,255,0,0.1);
}

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

<table id="my-table" class="data">
  <tr class="table-header">
    <th>Entry Header 1</th>
    <th>Entry Header 2</th>
    <th>Entry Header 3</th>
    <th>Entry Header 4</th>
  </tr>
  <tr>
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>
    <td>Entry First Line 3</td>
    <td>Entry First Line 4</td>
  </tr>
  <tr>
    <td>Entry Line 1</td>
    <td>Entry Line 2</td>
    <td>Entry Line 3</td>
    <td>Entry Line 4</td>
  </tr>
  <tr>
    <td>Entry Last Line 1</td>
    <td>Entry Last Line 2</td>
    <td>Entry Last Line 3</td>
    <td>Entry Last Line 4</td>
  </tr>
</table>

<p id="message"><span>0</span> row(s) selected!</p>

</div>