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

您可以一次完成所有操作，而不必在各个行上分配点击侦听器。

$('#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是表的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与委托的事件处理程序一起使用，可以使用它处理后代元素中的事件。用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>

在jQuery中选择和取消选择表行？

2 个答案: