如果行包含具有特定属性的值，如何更改 jquery 数据表的行颜色？

Question

我有一个 jquery 数据表，每一行都有一个名为“名称”的属性，它表示某种颜色。

如果名称为“红色”，我希望该行为红色，如果名称为“蓝色”，则我希望表格行为蓝色。

我怎样才能做到这一点？

代码见下文，codepen 见此处。

Javascript

items = [
  {Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111},
  {Id: "02", Name: "White", Price: "10.00", Quantity: "1",TimeStamp:222},
  {Id: "04", Name: "Blue", Price: "9.50", Quantity: "10",TimeStamp:434},
  {Id: "03", Name: "Red", Price: "9.00", Quantity: "2",TimeStamp:545},
  {Id: "06", Name: "White", Price: "100.00", Quantity: "2",TimeStamp:676},
   {Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111},
  {Id: "02", Name: "White", Price: "10.00", Quantity: "1",TimeStamp:222},
  {Id: "04", Name: "Blue", Price: "9.50", Quantity: "10",TimeStamp:434},
  {Id: "05",Name: "Blue", Price: "1.20", Quantity: "2",TimeStamp:777}
        ];


var ndx = crossfilter(items);
var Dim = ndx.dimension(function (d) {return d.Name;});


var datatable = $("#dc-data-table").dataTable({
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": true,
            "bInfo": false,
            "bAutoWidth": false,
            "bDeferRender": true,
            "aaData": Dim.top(Infinity),
            "bDestroy": true,
            "aoColumns": [
              {"mData": "Id", "sDefaultContent": ""},
              {"mData": "Name", "sDefaultContent": ""},
              {"mData": "Price", "sDefaultContent": ""},
              {"mData": "Quantity", "sDefaultContent": ""},
              {"mData": "TimeStamp", "sDefaultContent": ""}
            ]
        });




function RefreshTable() {
  dc.events.trigger(function () {
    alldata = Dim.top(Infinity);
    datatable.fnClearTable();
    datatable.fnAddData(alldata);
    datatable.fnDraw();
  });
}

for (var i = 0; i < dc.chartRegistry.list().length; i++) {
  var chartI = dc.chartRegistry.list()[i];
  chartI.on("filtered", RefreshTable);
}


dc.renderAll();

HTML

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


    <script src="https://rawgit.com/mbostock/d3/master/d3.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
    <script type="text/javascript" src="https://rawgit.com/dc-js/dc.js/master/dc.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" media="screen" /> 

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="screen" />


    <script src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css" media="screen" /> 



  <table  class="list table table-striped table-bordered" id='dc-data-table'>
    <thead>
      <tr class='header'>
        <th>Id</th>
        <th>Name</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>TimeStamp</th>
      </tr>
    </thead>
  </table>

我相信我可以通过 CSS 使用类似以下的内容来做到这一点，但我无法弄清楚如何让它依赖于 Name 的值。

table tbody tr td{
    background-color: red !important;
}

Answer 1

你必须像这样使用createdRow 方法

"createdRow": function ( row, data, index ) {
    $(row).children().eq(1).css({
      color: data.Name
    });
  }

每一行都是<tr>

$(row).children().eq(1) 将是每行的第二个 td

数据将是{Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111}

这里是demo