Question

我正在使用此站点Bootstrap Tables中的Bootstrap表，并将数据从MongoDB返回到表中。

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

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

Answer 1

这很简单。有关单元格样式，请参阅wenzhixin自己的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，我认为你正在使用代码来生成表格，所以如果它说是，则在该元素中添加一个类或者只是添加成功＆＃39;上课，并且不添加其他课程或只是“危险”。它将比上面的工作更简单，更好，没有js和其他东西。

Bootstrap表格单元格颜色基于值

2 个答案: