javascript - Bootstrap 表格行格式化程序

Question

你好，我正在为一个调用日志系统风格的应用程序开发一个 Bootstrap 表。该应用程序本身可用于 css。我使用 bootstrap 和 jquery formater 来突出显示一组偏向调用者 ID 的调用。

目前显示为

如果可能的话，我希望它们显示成这样

我正在使用带有模数的 javascript 将 css 类添加到字段中

function rowFormatter(item, row) {
    var value = row.CallerId;
     if (value) {
       if (value % 2 === 0) {
          $("#selectItems table tbody").css('background-color', 'grey');
      }
  }

如果调用者 ID 的模数为零，则应突出显示这些行。这部分 css 是导致问题的一部分，但我已经在 html 页面中覆盖了它

来自

.table-striped > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}

到

.table-striped > tbody > tr:nth-of-type(odd) {background-color: transparent!important;}

Answer 1

如果没有工作的 fiddle ，我无法检查以下是否有效，但它应该。

...据我了解，您已经使用 !important 覆盖了 background-color 因此，您可能在 javascript 中使用的任何内容都无法覆盖， !important 值。

首先，从覆盖中删除 !important 或在放置当前覆盖后添加此类。

.table-striped > tbody > tr.matchid,
.table-striped > tbody > tr.matchid:nth-of-type(odd) {
  background-color:grey !important;  // remove !important if you remove your override
}

然后在您的 Javascript 中替换:

function rowFormatter(item, row) {
  var value = row.CallerId;
    if (value) {
      if (value % 2 === 0) {
        $("#selectItems table tbody").addClass('matchid');
      }
    }
 }