Bootstrap-Table - 根据单元格值设置特定的背景颜色答案

【问题标题】：Bootstrap-Table - Set specific background-color based on cell valueBootstrap-Table - 根据单元格值设置特定的背景颜色
【发布时间】：2021-08-07 13:51:47
【问题描述】：

我正在使用 bootstrap-table，我想根据它们的值将某些列着色为红色或绿色。

我有下表：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

<h2>Products</h2>
<div class="table-responsive">

  <table id="table" data-toggle="table" data-height="460" data-page-size="10" data-pagination="true" class="table table-striped table-hover">
    <thead>
      <tr>
        <th data-field="trx_date" scope="col">Transaction Date</th>
        <th data-field="order_type" scope="col">Buy/Sell</th>
        <th data-field="total_trx" scope="col">Total Transaction</th>
        <th data-field="SecInfo" scope="col">Details</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
    </tbody>
  </table>
</div>

有没有办法像下面这样设置每一行的样式：

我尝试在我的tr-tag 上设置data-element，但是，因为我有很多表格需要设置样式，是否有更简单的 css 方法？

感谢您的回复！

【问题讨论】：

标签： css twitter-bootstrap bootstrap-table

【解决方案1】：

这是您需要的吗？

使用类而不是手动告诉检查'nth'单元格的原因是因为，将来可能是表格中的订单列或数字表中的列数可能会有所不同，因此建议使用选择器来实现这一点

$('.trans').each(function() {
  if (parseFloat($(this).text().replace(/\$|,/g, '')) <= 100000000.00) {
    $(this).parent().css({
      'background-color': '#89e289'
    })
  } else {
    $(this).parent().css({
      'background-color': '#f08080'
    })
  }

});
//If you want to check Sell/Product cell do:

$('.sales').each(function(){
  if($(this).text() == 'Sell'){
    $(this).parent().css({'background-color' : '#89e289'})
  }
  else{
     $(this).parent().css({'background-color' : '#f08080'})
  }
 });

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

<h2>Products</h2>
<div class="table-responsive">

  <table id="table" data-toggle="table" data-height="460" data-page-size="10" data-pagination="true" class="table table-striped table-hover">
    <thead>
      <tr>
        <th data-field="trx_date" scope="col">Transaction Date</th>
        <th data-field="order_type" scope="col">Buy/Sell</th>
        <th data-field="total_trx" scope="col">Total Transaction</th>
        <th data-field="SecInfo" scope="col">Details</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Sell</td>
        <td class="trans">$195,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Purchase</td>
        <td class="trans">$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Purchase</td>
        <td class="trans">$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Purchase</td>
        <td class="trans">$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Sell</td>
        <td class="trans">$195,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Sell</td>
        <td class="trans">$195,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Purchase</td>
        <td class="trans">$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Purchase</td>
        <td class="trans">$95,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Sell</td>
        <td class="trans">$195,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Sell</td>
        <td class="trans">$195,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sales">Sell</td>
        <td class="trans">$195,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案2】：

使用您当前的 HTML，您可以使用类似这样的方法来获取相应单元格的值，将字符串重新格式化为浮点数，并根据该值更改背景颜色。

$('#table tr').each(function () {
    let value = this.children[2].innerHTML;
    
    // omit dollar signs and commas with replace and return a float
    value = parseFloat(value.replace(/\$|,/g, ''));
    
    // compare values and adjust styling
    value > 90000000.50 ? this.style.backgroundColor = 'lightgreen' : '';
    value < 10000000.75 ? this.style.backgroundColor = 'salmon' : '';
});

【讨论】：

【解决方案3】：

很遗憾，您无法在 HTML 中设置任何元素的基本颜色或样式，这取决于它们使用 CSS 的内容。这是你必须用 javascript 查看的内容。

为什么会这样？因为 CSS 是一个前端样式“修饰符”，它可以编辑 HTML 的属性，而无需查看其内容和所写的内容。它只是应用样式。但是，使用 JavaScript，您可以通过获取、分析和更改其样式来编辑内容。

我获取了您的代码并对其内容进行了一些编辑以进行修改并向您展示如何在 javascript 中处理此问题。你可以用更有效的方式做到这一点，但我追求的是简单性和 DOM 让你最好理解

for (let i = 0; i < 11; i++) {
    let price = document.getElementsByClassName('price')[i].innerText;
    console.log(price)
    if (price <= 100){  
        document.getElementsByClassName('price')[i].style.backgroundColor = 'red'
    } else if (price > 100) {  
        document.getElementsByClassName('price')[i].style.backgroundColor = 'blue'
    }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>


<h2>Products</h2>
<div class="table-responsive">
  <table id="table" data-toggle="table" data-height="460" data-page-size="10" data-pagination="true" class="table table-striped table-hover">
    <thead>
      <tr>
        <th data-field="trx_date" scope="col">Transaction Date</th>
        <th data-field="order_type" scope="col">Buy/Sell</th>
        <th data-field="total_trx" scope="col">Total Transaction</th>
        <th data-field="SecInfo" scope="col">Details</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td class="price">80</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td class="price">90</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td class="price">700</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td class="price">900</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td class="price">500</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td class="price">200</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td class="price">300</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td class="price">100</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td class="price">100</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td class="price">100</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td class="price">100</td>
        <td><a href="">Details</a></td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：