Bootstrap 表格行格式化程序

Question

您好，我正在为呼叫日志系统样式应用程序制作引导表。 应用程序本身可以为 css 工作。 我正在使用带有 jquery 格式化程序的引导程序来突出显示特定于呼叫者 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

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

...据我所知，您已经使用!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');
      }
    }
 }

Answer 2

好吧，我相信您应该添加一个具有奇数行所需样式的类。

我刚刚为你做了一个例子： https : //jsfiddle.net/OsvaldoM/u3mza4L9/特别注意以下几行：

$('.table tr').each(function(value) {
  var $row = $(this);
  if ($row.find('.number').length) {
    if ($row.find('.number').text() % 2 === 0) {
      $(this).addClass('danger');
    }
   }
});

Answer 3

经过大量的研究和测试。 我找到了我需要的代码解决方案。 我没有使用格式化程序，而是使用了行样式并使用了以下代码。 这让我得到了我需要的结果

function rowStyle(row, index) {
    if (row.Extension % 2 ==0) {
        return { css: { "background-color": "Gainsboro" } };
    }
    else {
        return { css: { "background-color": "transparent" } };
    }
}