Search code examples
csstwitter-bootstrapbootstrap-table

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

I am using bootstrap-table and I would like to color certain columns red or green based on the value that they are having.

I am having the following 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>

Is there a way to style each row like the following:

enter image description here

I tried to set a data-element on my tr-tag however, as I have many tables that need to get styled ist there an easier way with css?

I appreciate your replies!

Solution

  • Is this What you need?

    The reason for using class instead of manually telling to check 'nth' cell is because, May be in future the order column in table or the number of column in the table may vary, so its recommenced to use a selector to implement this

    $('.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>