javascript - 如何更改所选行列数据表的字体颜色

Question

如何更改颜色行列“受众名称”？

我想将文本“一、二、三、四”更改为带下划线的蓝色。

该怎么做？我只想更改“受众名称”行列的颜色，而不是所有行。

jQuery :

 $(document).ready(function() {
    var tabble = $('#table1').dataTable({
      "ajax": "https://api.myjson.com/bins/sk48v",
      "columns": [{
        "data": "name"
      }, {
        "data": "subtype"
      }, {
        "data": "approximate_count"
      }, {
        "data": "time_created"
      }],
      "order": [4, "desc"],
      "bStateSave": true,
      "stateSave": true,
      "bPaginate": false,
      "bLengthChange": false,
      "bFilter": false,
      "bInfo": false,
      "bAutoWidth": false
    });
  });

table.dataTable tbody th, table.dataTable tbody td {
    color: blue;
    padding: 8px 10px;
    text-decoration: underline;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="table1" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Audience Name</th>
            <th>Type</th>
            <th>Size</th>
            <th>Date Created</th>
        </tr>
    </thead>

</table>

Not working on the snippet demonstration

JSFiddle

Answer 1

您可以像这样在列对象中使用 className 属性

JavaScript

$(document).ready(function() {
  var tabble = $('#table1').dataTable({
    "ajax": "https://api.myjson.com/bins/sk48v",
    "columns": [{
      "data": "name",
       "className": "blue"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }]
  });
});

HTML

<table id="table1" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Audience Name</th>
      <th>Type</th>
      <th>Size</th>
      <th>Date Created</th>
    </tr>
  </thead>

</table>

CSS

.blue {
  color: blue;
  text-decoration : underline;
}

这是工作 JSFIDDLE