Question

如何更改颜色行列＆＃39;受众姓名＆＃39;？

我想更改文字“一，二，三，四”和“变成蓝色，带下划线。

怎么做？我只想改变颜色＆＃39;观众姓名＆＃39;行列，而不是所有行。

jQuery：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

不使用代码段演示

JSFiddle

Answer 1

您可以在列对象中使用z=150属性，如此

<强> JAVASCRIPT

className

<强> HTML

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

<强> CSS

<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>

这是工作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创建class，并在加载数据表后将class添加到其中。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

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

我在这里使用了内联css。

这里是=＆gt;的 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 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>

如何更改选择行列dataTable的字体颜色

6 个答案: