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

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

先感谢您。

标签： jquerycssbackground-colorcss-tables

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>