jquery - 在 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使用委托(delegate)事件处理程序，您可以使用它处理来自后代元素的事件。使用 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>