javascript - Bootstrap 表 td 值着色

Question

我正在创建一个 Bootstrap 表，其中包含一个包含十进制数字列表的列。我需要将小于 20 的数字涂成蓝色，将大于 20 的数字涂成黑色。

表的构造如下:

<table id="table" data-click-to-select="true" data-single-select="true">
</table>

$(function () {
    $('#table').bootstrapTable({
        columns: [{
            field: 'state',
            checkbox: true
        },
        {
            field: '2013',
            title: '2013'
        },
        {
            field: '2014',
            title: '2014'
        },
        {
            field: '2015',
            title: '2015'
        },
        {
            field: '2016',
            title: '2016'
        },
        {
            field: '2017',
            title: '2017'
        },
        {
            field: '2018',
            title: '2018'
        },
        {
            field: '2019',
            title: '2019'
        }],
        data: [{
            2013: "NaN",
            2014: "4.1",
            2015: "2.2",
            2016: "2.8",
            2017: "3.0",
            2018: "NaN",
            2019: "3.4"
        },
        {
            2013: "3.6",
            2014: "3.7",
            2015: "3.4",
            2016: "3.5",
            2017: "3.5",
            2018: "3.9",
            2019: "20.4"
        },
        {
            2013: "1.5",
            2014: "4.1",
            2015: "2.7",
            2016: "2.7",
            2017: "3.0",
            2018: "NaN",
            2019: "1.4"
        }]
    });
});

我将如何根据这种格式为 Bootstrap 表中的各个值着色？

Answer 1

您可以在列选项上使用 formatter 属性。

Column Properties

The cell formatter function, take three parameters: value: the field value. row: the row record data. index: the row index.

$(function () {

  function colorFormatter(value, row, index) {
    if (parseFloat(value) < 20.00 ) {
      return '<div style="color:blue" >' + value + '</div>';            
    } else {
      return '<div style="color:black" >' + value + '</div>'; 
    }
  }

  $('#table').bootstrapTable({
    columns: [{
      field: '2013',
      title: '2013',
      formatter: colorFormatter,
    }, {
      field: '2014',
      title: '2014',
      formatter: colorFormatter,
    }, {
      field: '2015',
      title: '2015',
      formatter: colorFormatter,
    }, {
      field: '2016',
      title: '2016',
      formatter: colorFormatter,
    }, {
      field: '2017',
      title: '2017',
      formatter: colorFormatter,
    }, {
      field: '2018',
      title: '2018',
      formatter: colorFormatter,
    }, {
      field: '2019',
      title: '2019',
      formatter: colorFormatter,
    }],
    data: [{
      2013: "NaN",
      2014: "4.1",
      2015: "2.2",
      2016: "2.8",
      2017: "3.0",
      2018: "NaN",
      2019: "3.4"
    }, {
      2013: "3.6",
      2014: "3.7",
      2015: "3.4",
      2016: "3.5",
      2017: "3.5",
      2018: "3.9",
      2019: "20.4"
    }, {
      2013: "1.5",
      2014: "4.1",
      2015: "2.7",
      2016: "2.7",
      2017: "3.0",
      2018: "NaN",
      2019: "1.4"
    }]
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<table id="table" data-click-to-select="true" data-single-select="true"></table>