Выбрать и отменить выбор строк таблицы в Jquery?

Question

Мне нужно знать, как выбрать / отменить выбор строк таблицы с помощью jQuery.

В настоящее время я делаю это так, что не очень хорошо, как мне известно:

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

Дополнение: есть ли способ проверить, выбран ли хотя бы один из них простым способом? Мне нужно было бы иметь возможность скрыть / показать кнопку, если нажать на одну из них.

Заранее спасибо.

Answer 1

Попробуйте использовать .on с делегированным обработчиком событий, с ним вы можете обрабатывать события из дочерних элементов. Получить количество элементов с 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>

Answer 2

Вместо назначения прослушивателей щелчков для отдельных строк вы можете сделать все это за один раз.

$('#myTable td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  //Relevant code to update CSS propoerties of the clicked row.
});

Здесь myTable - это идентификатор вашей таблицы.

Попробуйте этот пример.

$('#myTable tr').click(function(){
      //This gives index
      var row = $(this).parent().children().index($(this));
      //console.log('Row number-> '+row);
      //Clearing color from all siblings
      $(this).siblings().css('background-color','white');
      $(this).css('background-color','cyan');
    });

tr{
  height: 10px;
  width:100px;
}
table{
  width: 100%;
}
table, tr, td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="myTable">
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td></tr>
  <tr><td>6</td></tr>
</table>