通过data-formatter设置bootstarp的table单元格背景色例子

可以使用Bootstrap的table组件中的data-formatter属性来设置单元格的背景色。下面是一个例子：

HTML代码：

<table class="table">
  <thead>
    <tr>
      <th>名称</th>
      <th>数量</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品A</td>
      <td data-formatter="highlightNumber">100</td>
      <td data-formatter="highlightPrice">50.00</td>
    </tr>
    <tr>
      <td>商品B</td>
      <td data-formatter="highlightNumber">200</td>
      <td data-formatter="highlightPrice">80.00</td>
    </tr>
  </tbody>
</table>

Javascript代码：

function highlightNumber(value, row, index) {
  if (value > 150) {
    return {
      classes: 'bg-success'
    };
  } else if (value > 100) {
    return {
      classes: 'bg-warning'
    };
  } else {
    return {
      classes: 'bg-danger'
    };
  }
}

function highlightPrice(value, row, index) {
  if (value > 70) {
    return {
      classes: 'bg-success'
    };
  } else if (value > 50) {
    return {
      classes: 'bg-warning'
    };
  } else {
    return {
      classes: 'bg-danger'
    };
  }
}

在上面的代码中，我们定义了两个函数highlightNumber和highlightPrice，用于对数量和价格进行不同的背景色高亮。这两个函数返回一个对象，其中classes属性指定了单元格的背景色。我们通过data-formatter属性将这两个函数绑定到了相应的单元格中。

注意：这里使用了Bootstrap的背景色类，你需要在引入Bootstrap的CSS文件后才能使用这些类。