javascript - 为条纹表选择的行颜色

Question

我希望表格中选定的行具有特定的背景色。我的表是条纹的，它只适用于白行。我正在使用 datatables.net。

如果选中灰色行，我希望灰色行与白色行颜色相同。但是使用此代码，只需单击一下即可将白行变为灰色。但是，如果我只使用第一个 if else block ，它适用于白行。我做错了什么？

if (this.style.background == 'white') {
  $(this).css('background', '#cce6ff');
} else {
  $(this).css('background', 'white');
}

if (this.style.background == 'lightgrey' && this.style.background != 'white') {
  $(this).css('background', '#cce6ff');
} else if (this.style.background != 'white') {
  $(this).css('background', 'lightgrey');
}

这也行不通:

  if (this.style.background == 'white'){
        $(this).css('background', '#b6c7db');
        break;
    }else{
        $(this).css('background', 'white');
        break;
    }
    if (this.style.background == 'lightgrey' && this.style.background != 'white'){
        $(this).css('background', '#cce6ff');

    }else if (this.style.background != 'white'){
        $(this).css('background', 'lightgrey');}

Answer 1

您需要确保this 实际引用该行。如果不是，您将需要调整它以定位该行。

就是说，假设数据表已经将选定的类添加到行中，您可以使用 CSS 来定位它。

然后，如果上面的方法仍然不起作用，很可能你需要使用 !important 来强制该值，这无疑会在其他地方被覆盖

方法二:您应该使用您拥有的 CSS 规则来执行此操作，并避免检查当前颜色。选择时，从所有行中删除 selected 类，并在选中的行上切换它。

您的代码是否在点击处理程序中？您的第二个代码段中有 break 语句，此代码是否在循环内？我觉得您对条件语句有一些误解，但我很难理解这些代码片段试图实现什么——例如，this.style.background == 'lightgrey' && this.style.background != 'white' 不必要地冗长，如果背景等于 lightgrey，则它不会等于 white，可以删除第二个比较。