Bootstrap Table单元格颜色基于值 [英] Bootstrap Table cell color based on value

问题描述

我正在使用此站点上的Bootstrap表 Bootstrap表，我将数据返回到该表中从我的MongoDB.

I am using Bootstrap tables from this site Bootstrap Tables and I return data to the table from my MongoDB.

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

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".

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

Any help would be appreciated!! Thanks

推荐答案

这真的很简单.有关单元格样式，请参见wenzhixin自己的小提琴

This is really simple. See the wenzhixin's own fiddle for cell styling

bootstrap-tables具有用于单元格自定义名称cellStyle

JavaScript:

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>

这篇关于Bootstrap Table单元格颜色基于值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！