Bootstrap-Table

Question

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

我有以下 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>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Purchase</td>
        <td>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td>Sell</td>
        <td>,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
    </tbody>
  </table>
</div>

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

我试图在我的 tr 标签上设置一个 data-element 但是，因为我有很多 table 需要设置样式，所以使用 [=34 更简单=]?

感谢您的回复！

Answer 1

遗憾的是，您无法设置 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>

Answer 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' : '';
});

Answer 3

这是您需要的吗？

之所以使用class而不是手动告诉检查'nth'单元格是因为，将来可能订单table或中的列table中的列数可能会有所不同，因此重新开始使用选择器来实现此

$('.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">5,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">,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">,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">,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">5,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">5,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">,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">,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">5,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">5,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">5,001,513.81</td>
        <td><a href="">Details</a></td>
      </tr>
    </tbody>
  </table>
</div>

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

Bootstrap-Table - Set specific background-color based on cell value

css

twitter-bootstrap