如何更改选定行列数据表的字体颜色

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>

没有进行 sn-p 演示

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

Answer 2

您还可以为列添加自定义类并根据需要制作样式。

$(document).ready(function() {
  var tabble = $('#table1').dataTable({
    "ajax": "https://api.myjson.com/bins/sk48v",
    "columns": [{
      "data": "name",
      "class": "custom-class" //Class here
    }, {
      "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
  });
});

在css中

.custom-class {
    color: blue;
    padding: 8px 10px;
    text-decoration: underline;
    cursor: pointer;
    }

Answer 3

table.dataTable tbody tr.selected {
    color: white;
    background-color: #eeeeee;
}

Answer 4

你有两个选择。您可以使用内联 css 或通过为该行列指定类名来使用外部 css。

我在这里使用了内联 css。

这里是 => WORKING DEMO

<table id="table1" class="table table-bordered table-hover">
  <thead>
    <tr> 
      <th style="color:blue; text-decoration: underline;">Audience Name</th>
      <th>Type</th>
      <th>Size</th>
      <th>Date Created</th>
    </tr>
  </thead>

</table>

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
  });
});

Answer 5

您可以这样做，使用该 CSS 创建一个 class，并在加载数据表后将 class 添加到其中。

$(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
    });
});

$(document).find("#table1 thead th:first-child, #table1 td:first-child").addClass('test');

.test {
    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>

Answer 6

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

</table>