Question

我正在创建一个包含带有十进制数列表的列的引导表。如果它们小于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

试试这个，我没有多少使用自举表的经验，而且因为你使用了bootstrap，我假设你也在使用jquery，但也许这样可行：

$("#table tr td").each(function(){
   var currentVal = parseInt($(this).text());
   if(currentVal > 20)
   {

        $(this).css('color','black');
   }
else if(currentVal < 20)
{

        $(this).css('color','blue');
}
});

Answer 2

您可以执行类似

的操作

<强> CSS

.ltwenty{
 color:blue;
}
.gtwenty{
 color:black;
}

<强>的jQuery

$('#table tr td').each(function(){
   if(parseInt($(this).html()) > 20){
       $(this).addClass('gtwenty');
   }else{
      $(this).addClass('ltwenty');
   }
})

Answer 3

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

Column Properties

单元格格式函数，取三个参数： value：字段值。 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>

Bootstrap表td值着色

3 个答案: