日常开发中我们通常会用到隔行变色来美化表格,也会根据每行的数据显示特定的背景颜色,如果库存低于100的行显示红色背景
CSS样式
<style> .bg-blue { background-color: #0074D9 !important; } .bg-green { background-color: green !important; } .bg-red { background-color: red !important; } </style>
JS代码
<script> //bootstrap table初始化数据 itxst.com $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height: 400, rowStyle: function(row, index) { var classes = [ 'bg-blue', 'bg-green', 'bg-red' ] if (index % 2 === 0 && index / 2 < classes.length) { return { classes: classes[index / 2] } } return { css: { color: 'blue' } } } }); </script>