Bootstrap表行格式化程序

Question

您好我正在使用一个用于呼叫日志系统样式应用程序的引导表。应用程序本身适用于css。我正在使用带有jquery formater的bootstrap来突出显示一组偏向于来电显示的呼叫。

目前显示为此

如果可能的话，我希望它们能够显示出来

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

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

}

如果调用者标识的模数为零，则应突出显示这些行。这部分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

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

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

首先，从覆盖中删除!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" } };
}

}