Bootstrap Table Cell Background Conditional Formatting

Similar To Power BI Background Color Conditional Formatting

by Greg Esguerra

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.0/bootstrap-table.min.js"></script>
<table id="tblDemo" class="table-condensed table-striped">
	<thead>
		<tr>
			<th data-field="id">ID</th>
			<th data-field="name">Name</th>
			<th data-field="value" data-cell-style="ChangeCellBackground">Value</th>
		</tr>
	</thead>
</table>

JavaScript

$(function () {
    var $table = $('#tblDemo');
    var mydata = 
    [
        {
            "id": 0,
            "name": "test0",
            "value": "100"
        },
        {
            "id": 1,
            "name": "test1",
            "value": "12"
        },
        {
            "id": 2,
            "name": "test2",
            "value": "41"
        },
        {
            "id": 3,
            "name": "test3",
            "value": "31"
        },
        {
            "id": 4,
            "name": "test4",
            "value": "0"
        },
        {
            "id": 5,
            "name": "test5",
            "value": "5"
        },
        {
            "id": 6,
            "name": "test6",
            "value": "70"
        },
        {
            "id": 7,
            "name": "test7",
            "value": "21"
        },
        {
            "id": 8,
            "name": "test8",
            "value": "32"
        },
        {
            "id": 9,
            "name": "test9",
            "value": "5"
        },
        {
            "id": 10,
            "name": "test10",
            "value": "0"
        },
        {
            "id": 11,
            "name": "test11",
            "value": "99"
        },
        {
            "id": 12,
            "name": "test12",
            "value": "88"
        },
        {
            "id": 13,
            "name": "test13",
            "value": "65.5"
        },
        {
            "id": 14,
            "name": "test14",
            "value": "35"
        },
        {
            "id": 15,
            "name": "test15",
            "value": "0"
        },
        {
            "id": 16,
            "name": "test16",
            "value": "6"
        },
        {
            "id": 17,
            "name": "test17",
            "value": "100"
        },
        {
            "id": 18,
            "name": "test18",
            "value": "18"
        },
        {
            "id": 19,
            "name": "test19",
    ...