基于值的引导表单元格颜色

Question

我正在使用来自该站点Bootstrap Tables 的引导表，并将数据从我的 MongoDB 中返回到表中。

其中一个字段是“ACTIVE”，我想根据字段中返回的值设置单元格颜色。如果是“是”，我希望单元格为绿色，红色表示“否”。

任何帮助将不胜感激！ 谢谢

Answer 1

这真的很简单。单元格样式见文之心自己的fiddle

bootstrap-tables 具有单元格自定义名称cellStyle的功能

JavaScript：

function cellStyle(value, row, index) {
    return {
        classes: value.trim() === 'YES' ? 'yes' : 'no'
    };
}

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>

Answer 2

最强大和最简单的技术是使用 css， 我认为您正在使用生成表格的代码，所以如果它说是，则向该元素添加一个类或简单地添加“成功”类，而不添加另一个类或只是“危险”。会比上面简单好用，不用js之类的。