Select 并取消选择 Jquery 中的 Table 行？

Question

我需要知道如何使用 jQuery.

select/deselect Table 行

目前我是这样做的，不是很好，据我所知：

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

补充：另外，有什么方法可以简单地检查是否至少选择了其中一个？如果单击其中一个按钮，我将需要能够 hide/show 一个按钮。

提前致谢。

Answer 1

您可以一次性完成所有操作，而不是在单独的行上分配点击监听器。

$('#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是你的table的id。

试试这个例子。

$('#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>

Answer 2

尝试使用 .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>

Select 并取消选择 Jquery 中的 Table 行？

Select and Deselect Table Rows in Jquery?

css

jquery

background-color

css-tables