Question

我有一个数据表，它可以正确显示所有信息，并且工作正常，直到我添加行突出显示代码行，值PV PLUS应该高亮绿色，但它们不会。

此外，当我向JSFiddle添加完全相同的代码时，即使我已经链接到cdn文件，所有格式化已经消失了，我认为问题可能是我将两个jquery项放在一起的方式，但我是没有得到JS Fiddle abd的错误，所以想知道是否还有其他一些问题

CSS

table.dataTable tr.highlight {
  background-color: lime; 
  }

Javascript代码

$(document).ready( function () {
$('#example').dataTable( {
"aoColumns": [
    null,
    null,
    null,
    null,
    null,
    null,
    { "sType": "date-uk" },
    { "sType": "date-uk" },
    { "sType": "date-uk" },
    null,
    null,
    null,
    null,
    null
     ]
    });  
   } );

  jQuery.extend( jQuery.fn.dataTableExt.oSort, {
  "date-uk-pre": function ( a ) {
  var ukDatea = a.split('/');
  return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
     },

    "date-uk-asc": function ( a, b ) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },

"date-uk-desc": function ( a, b ) {
   return ((a < b) ? 1 : ((a > b) ? -1 : 0));
     }

   } );
   fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
   if (aData[3] == "PV PLUS") {
       $(nRow).addClass('highlight');
      }
   }

HTML表格代码

          <table id="example">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Telephone</th>
                    <th>Product</th>
                    <th>Amount</th>
                    <th>Sales rep</th>
                    <th>Survey Date</th>
                    <th>Install Date</th>
                    <th>Sales Date</th>
                    <th>Payment</th>
                    <th>Notes</th>
                    <th>Month</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Telephone</th>
                    <th>Product</th>
                    <th>Amount</th>
                    <th>Sales rep</th>
                    <th>Survey Date</th>
                    <th>Install Date</th>
                    <th>Sales Date</th>
                    <th>Payment</th>
                    <th>Notes</th>
                    <th>Month</th>
                    <th>Delete</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                      <td>Lee Jones</td>
                      <td>32 road street</td>
                      <td>01268 413657</td>
                      <td>PV PLUS</td>
                      <td>£ 12,000</td>
                      <td>John</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                     </tr>
                     <tr>
                      <td>Simon Walker</td>
                      <td>34 road street</td>
                      <td>01268 413857</td>
                      <td>PV PLUS</td>
                      <td>£ 18,000</td>
                      <td>John</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                     </tr>
            </tbody>

Answer 1

您的示例存在一些问题（缺少jQuery，样式）。但是，未突出显示行的主要原因是您必须使用!important指令。

table.dataTable tr.highlight,
table.dataTable tr.highlight td {
    background-color: lime !important; 
}

请参阅updated jsFiddle以获取代码和演示。

DataTable行不突出显示

1 个答案: