javascript - 基于值的 Bootstrap 表格单元格颜色

Question

我正在使用来自此站点的 Bootstrap 表 Bootstrap Tables然后我将数据从我的 MongoDB 返回到表中。

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

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

Answer 1

这真的很简单。看文志鑫自己fiddle用于单元格样式

bootstrap-tables has a function for cell customization name 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>