使用jquery更改数据表中行选择的颜色

Question

我有一个带有线条的数据表，当我单击一行时，我想更改背景颜色：选择行中的红色，而其他行我想留下背景颜色：白色

我试试这个：

$(document).on('click', "#table_user tr:not(:first) td:first-child", function() {
var row_num = parseInt( $(this).parent().index() )+1; 
 if(row_num == $(this).closest('tr').index()+1){

          $(this).css({'background-color':'red'});
        }else{
          $(this).css({'background-color':'white'});
        }
});

但它不起作用

Answer 1

在您的情况下，if 条件将始终导致 true。您可以执行以下操作：

$(document).on('click', "#table_user tr:not(:first) td:first-child", function() {
  $(this).toggleClass("selected");
});

然后，对于 .selected 类，您可以根据偶数或奇数对其进行样式设置：

.selected:nth-child(even) {
  background-color: #fff;
}
.selected:nth-child(odd) {
  background-color: #f00;
}

Answer 2

如果您只希望这发生在除第一行之外的所有行上，这将起作用：

$("#table_user td").on('click', function() {
  var row_num = parseInt($(this).parent().index()) + 1;
  var cell_num = parseInt($(this).index()) + 1;
  if (row_num != 1) {
    if(cell_num == 1) {
        $(this).css('background-color', 'red')
  } 
  else {
        $(this).css('background-color', 'white');
  }
 }
});