浅谈bootstrapTable如何动态设置行和列的颜色

什么是bootstrapTable？

bootstrapTable是一个基于jQuery和Bootstrap的表格插件，用于展示和操作数据。

如何动态设置行和列的颜色？

bootstrapTable提供了多种设置行和列颜色的方法，包括CSS样式、自定义函数等。

方法1：使用CSS样式

使用CSS样式可以方便地设置行和列的颜色，可以通过CSS选择器来选择单独的行或列。例如，下面的代码将表格的奇数行背景色设置为灰色，偶数行背景色设置为白色：

<table id="myTable">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品1</td>
      <td>100</td>
    </tr>
    <tr>
      <td>商品2</td>
      <td>200</td>
    </tr>
    <tr>
      <td>商品3</td>
      <td>300</td>
    </tr>
  </tbody>
</table>
<style>
  #myTable tbody tr:nth-child(even) {
    background-color: #fff;
  }
  #myTable tbody tr:nth-child(odd) {
    background-color: #ccc;
  }
</style>

使用CSS样式可以方便地设置各种颜色和样式。

方法2：使用自定义函数

使用自定义函数可以根据数据内容来动态设置行和列的颜色，可以根据需要自行编写JavaScript函数。例如，下面的代码根据每行商品价格的不同来设置不同的颜色：

<table id="myTable">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr data-price="100">
      <td>商品1</td>
      <td>100</td>
    </tr>
    <tr data-price="200">
      <td>商品2</td>
      <td>200</td>
    </tr>
    <tr data-price="300">
      <td>商品3</td>
      <td>300</td>
    </tr>
  </tbody>
</table>
<script>
  $(function () {
    $('#myTable').bootstrapTable({
      rowStyle: function (row, index) {
        var price = parseInt(row.price);
        if (price <= 100) {
          return { classes: 'danger' };
        } else if (price <= 200) {
          return { classes: 'warning' };
        } else {
          return { classes: 'success' };
        }
      }
    });
  });
</script>

上述代码中，通过在tr元素上添加自定义属性data-price，然后在rowStyle函数中根据price属性的值来选择不同的样式（danger、warning、success）。

方法3：使用表格事件

使用表格事件可以在特定的操作后动态改变行和列的颜色，例如，当鼠标悬停在某一行上时，将该行的背景色改为黄色。下面的代码演示了如何使用表格事件来改变行的颜色：

<table id="myTable">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品1</td>
      <td>100</td>
    </tr>
    <tr>
      <td>商品2</td>
      <td>200</td>
    </tr>
    <tr>
      <td>商品3</td>
      <td>300</td>
    </tr>
  </tbody>
</table>
<script>
  $(function () {
    $('#myTable tbody tr').mouseover(function () {
      $(this).css('background-color', '#ff0');
    }).mouseout(function () {
      $(this).removeAttr('style');
    })
  });
</script>

上述代码中，当鼠标悬停在某一行上时，使用jquery的css方法将该行的背景色改为黄色，当鼠标移开时，使用removeAttr方法将样式属性删除，达到动态改变颜色的效果。

总结

bootstrapTable提供了多种方法来动态设置行和列的颜色，可以根据具体需求选择合适的方法。CSS样式、自定义函数、表格事件都是常用的设置颜色的方法，可以灵活应用。

参考链接：

bootstrapTable官方文档