Use table row coloring for cells in Bootstrap
You can override the default css rules with this:
.table tbody tr > td.success {
background-color: #dff0d8 !important;
}
.table tbody tr > td.error {
background-color: #f2dede !important;
}
.table tbody tr > td.warning {
background-color: #fcf8e3 !important;
}
.table tbody tr > td.info {
background-color: #d9edf7 !important;
}
.table-hover tbody tr:hover > td.success {
background-color: #d0e9c6 !important;
}
.table-hover tbody tr:hover > td.error {
background-color: #ebcccc !important;
}
.table-hover tbody tr:hover > td.warning {
background-color: #faf2cc !important;
}
.table-hover tbody tr:hover > td.info {
background-color: #c4e3f3 !important;
}
!important
is needed as bootstrap actually colours the cells individually (afaik it's not possible to just apply background-color to a tr). I couldn't find any colour variables in my version of bootstrap but that's the basic idea anyway.
bootstrap-table - how to set table row background color
If you are using bootstrap table, why not do it the "bootstrap table" way?
Row style set this way will be maintained when using search box to filter etc.
Use the Table option rowStyle
:
The row style formatter function, takes two parameters:
row: the row record data.
index: the row index.
Support classes or css. Example usage:
function rowStyle(row, index) {
return {
classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
};
}
Check out the jsFiddle here.
Bootstrap Table cell color based on value
This is really simple. See the wenzhixin's own fiddle for cell styling
bootstrap-tables has a function for cell customization name
cellStyle
JavaScript:
function cellStyle(value, row, index) {
return {
classes: value.trim() === 'YES' ? 'yes' : 'no'
};
}
Css:
td.yes {
background-color: green;
}
td.no {
background-color: red;
}
function cellStyle(value, row, index) { return { classes: value.trim() === 'YES' ? 'yes' : 'no' };}
td.yes { background-color: green;}td.no { background-color: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet" /><script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script><table data-toggle="table" id="demo-table"> <thead> <tr> <th data-cell-style="cellStyle">Active</th> <th>Stars</th> <th>Forks</th> <th>Description</th> </tr> </thead> <tbody> <tr id="tr-id-1" class="tr-class-1"> <td id="td-id-1" class="td-class-1">YES </td> <td>526</td> <td>122</td> <td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) </td> </tr> <tr id="tr-id-2" class="tr-class-2"> <td id="td-id-2" class="td-class-2"> YES </td> <td>288</td> <td>150</td> <td>A jQuery plugin to select multiple elements with checkboxes :) </td> </tr> <tr id="tr-id-3" class="tr-class-3"> <td id="td-id-3" class="td-class-3"> NO </td> <td>32</td> <td>11</td> <td>Show/hide password plugin for twitter bootstrap. </td> </tr> <tr id="tr-id-4" class="tr-class-4"> <td id="td-id-4" class="td-class-4"> YES </td> <td>13</td> <td>4</td> <td>my blog</td> </tr> <tr id="tr-id-5" class="tr-class-5"> <td id="td-id-5" class="td-class-5"> NO <td>6</td> <td>3</td> <td>Redmine notification tools for chrome extension.</td> </tr> </tbody></table>
Setting background color of new rows in Bootstrap Table
Try this one
http://jsfiddle.net/bitriddler/qjht8stb/
Changes:
When adding new rows I added paintBlue=true
Updated cellStyle
to this
function cellStyle(value=Null, row=Null, index=0, field=Null) {
if(row.paintBlue) {
return {css: {"background-color": "blue"}}
}
return {};
}
Passing cellStyle
function when defining columns instead of passing in html data-cell-style
attribute
...
{
field: 'Notes',
sortable: 'true',
cellStyle: cellStyle,
title: 'Notes',
editable: {
type: 'textarea'
}
...
How to color cells using Bootstrap?
In Bootstrap 4, you can give color to the table rows by adding bg classes to the <tr>
elements like;
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
Take a look at bootstrap documentation of tables which explains it in detail
Bootstrap-Table - Set specific background-color based on cell value
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>
How to change bootstrap-table row background?
I just update your code with few jQuery
changes. Try this I hope it'll help you out. Thanks
$(document).ready(function() { $('.table tr td').each(function(i, v){ if(v.textContent === 'GOOD') { $(v.parentElement).addClass('table-success'); } else if(v.textContent === 'BAD') { $(v.parentElement).addClass('table-danger'); } }) })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" /><table data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse"> <thead> <tr> <th scope="col" style="width: 8%" class="text-center">Number</th> <th scope="col" style="width: 20%" class="text-center">Name</th> <th scope="col" style="width: 61%" class="text-center">Present</th> <th scope="col" style="width: 10%" class="text-center">Result</th> </tr> </thead> <tr> <td class="text-center">01</td> <td class="text-center">$title01</td> <td>$present01</td> <td scope="row" class="text-center">GOOD</td> </tr> <tr> <td class="text-center">02</td> <td class="text-center">$title02</td> <td>$present02</td> <td scope="row" class="text-center">BAD</td> </tr> <tr> <td class="text-center">03</td> <td class="text-center">$title03</td> <td>$present03</td> <td scope="row" class="text-center">GOOD</td> </tr></table>
Bootstrap 3.3.5 - Change Table Row Background Colour for 'Info' Class on a single page
Try this, it will change:
.table tbody>tr.info td{ background-color: #24e5d2 !important;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><table class="table table-bordered"> <tr> <td>Definition</td> </tr> <tr class="info"> <td>Lorem Ipsum</td> </tr></table>
Related Topics
Filter: Progid:Dximagetransform.Microsoft.Gradient Is Not Working in Ie7
Jquery Mobile Set Width of 2 Elements to 80% and 20%
Scss/Sass to CSS in Special Folder with PHPstorm 7 File Watcher
Whats The CSS to Make Something Go to The Next Line in The Page
Generate Random Color with Pure CSS (No JavaScript)
Is There a Working Implementation of CSS3 Grid Layout for Webkit
Bootstrap 4 Vertical Align Text Won't Center on Card
How to Fade in and Out Color of Svg
How to Make The Body Width Equal to The Device-Width Automatically in CSS3 Media Query