twitter-bootstrap 基于值的 Bootstrap Table 单元格颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42054891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Table cell color based on value
提问by user2843365
I am using Bootstrap tables from this site Bootstrap Tablesand I return data to the table from my MongoDB.
我正在使用此站点Bootstrap Tables 中的 Bootstrap 表，并将数据从我的 MongoDB 返回到表中。
One of the fields is "ACTIVE" and i want to set the cell color based on the value returned in the field. If it is "YES" I want the cell to be green, and red for "NO".
其中一个字段是“ACTIVE”，我想根据该字段中返回的值设置单元格颜色。如果它是“是”，我希望单元格为绿色，“否”为红色。
Any help would be appreciated!! Thanks
任何帮助，将不胜感激！！谢谢
回答by Parvez Rahaman
This is really simple. See the wenzhixin's own fiddlefor cell styling
这真的很简单。看文知新自己的fiddlefor cell造型
bootstrap-tables has a function for cell customization name
cellStyle
bootstrap-tables 有单元格自定义名称的功能
cellStyle
JavaScript:
JavaScript：
function cellStyle(value, row, index) {
return {
classes: value.trim() === 'YES' ? 'yes' : 'no'
};
}
Css:
css：
td.yes {
background-color: green;
}
td.no {
background-color: red;
}
function cellStyle(value, row, index) {
return {
classes: value.trim() === 'YES' ? 'yes' : 'no'
};
}td.yes {
background-color: green;
}
td.no {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet" />
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table data-toggle="table" id="demo-table">
<thead>
<tr>
<th data-cell-style="cellStyle">Active</th>
<th>Stars</th>
<th>Forks</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="tr-class-1">
<td id="td-id-1" class="td-class-1">YES
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">
YES
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">
NO
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
<tr id="tr-id-4" class="tr-class-4">
<td id="td-id-4" class="td-class-4">
YES
</td>
<td>13</td>
<td>4</td>
<td>my blog</td>
</tr>
<tr id="tr-id-5" class="tr-class-5">
<td id="td-id-5" class="td-class-5">
NO
<td>6</td>
<td>3</td>
<td>Redmine notification tools for chrome extension.</td>
</tr>
</tbody>
</table>回答by Mayank Rajput
Most powerful and easy technique is using css, i think you are using a code for generating tables, so if it said yes add a class to that element or simply add 'success' class, and for no add another class or just 'danger'. It will work simply and better than above, no js, and other things.
最强大和最简单的技术是使用 css，我认为您正在使用生成表格的代码，所以如果它说是，请向该元素添加一个类或简单地添加“成功”类，并且不添加另一个类或只是“危险” . 它将比上面的更简单，更好，没有 js 和其他东西。
