We Keep Coding

How to change bootstrap-table row background?

If the result is "good", I want the entire row to turn green. But it does not change anything.
https://jsfiddle.net/Tonato_/tnw3j5p2/7/
Here is the code.
I do not realize at all what is the problem. I think I did it all correctly.
function rowStyle(row, index) {
const obj = {};
var classes = ['active', 'success', 'info', 'warning', 'danger'];
if (Object.keys(row).map(key => row[key]).some(value => String(value).includes('BAD'))) {
return Object.assign({}, obj, {
classes: 'danger'
});
}
if (Object.keys(row).map(key => row[key]).some(value => String(value).includes('GOOD'))) {
return Object.assign({}, obj, {
classes: 'success'
});
}
return obj;
}
<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>

You can achieve it by using simple jQuery code, Run the snippet below
$('table tr').each(function() {
if($(this).find('td:last-child').html() === 'GOOD'){
$(this).css('background-color', 'green');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

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>

First add an id to the table, and then wrap the tr with <tbody>.
<table id='my-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>
<tbody>
<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>
</tbody>
</table>
Then by jQuery use can loop through each tr of tbody in your table. Then based on your result, add css to that row.
$('#my-table tbody tr').each(function(i, item){
var result = $(item).find('td').last().text();
if(result === 'GOOD') $(item).css('background-color', 'green');
else $(item).css('background-color', 'red');
})

How to use a second column to sort if first column show equal values

We have a table that shows teams standings.
Now currently we are using jQuery to sort based on points -> "PTS"
However there are cases like the image above where the points are equal (like the two last teams) in this case to see who should go first we must look at the F column and in this case "Dubai Stallions" should go above the "Abu Dhabi Capitals".
Our code is currently like this:
<script type="text/javascript">
$(document).ready(function(){
$('div.standing table>tbody > tr:not(:first-child)').sort(function (a, b) {
return +$('td:eq(5)', b).text() > +$('td:eq(5)', a).text();
}).appendTo('tbody');
});
</script>
and we have for the table
<div class="standing">
<table class="uppercased">
<tr>
<th style="width:26%">teams</th>
<th style="width:6%">gp</th>
<th style="width:6%">w</th>
<th style="width:6%">l</th>
<th style="width:6%">t</th>
<th style="width:6%">pts</th>
<th style="width:6%">f</th>
<th style="width:6%">a</th>
<th style="width:8%">Standing</th>
<th style="width:8%">strk</th>
</tr>
With similar below it.
Can anyone help with adjusting the jQuery?
URL: https://www.eafl.ae/standing?division=varsity
Thanks.

You can do a if condition. If points are equal, use the f column to sort.
Here is a snippet.
$(function() {
$('div.standing table>tbody > tr:not(:first-child)').sort(function(a, b) {
if (+$('td:eq(5)', b).text() != +$('td:eq(5)', a).text()) // Check if PTS column is not equal
return +$('td:eq(5)', b).text() > +$('td:eq(5)', a).text(); // Use PTS column since they are not equal
else
return +$('td:eq(6)', b).text() > +$('td:eq(6)', a).text(); // Sincne PTS column are equal, use the f column
}).appendTo('tbody');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="standing">
<table class="uppercased">
<tr>
<th style="width:26%">teams</th>
<th style="width:6%">gp</th>
<th style="width:6%">w</th>
<th style="width:6%">l</th>
<th style="width:6%">t</th>
<th style="width:6%">pts</th>
<th style="width:6%">f</th>
<th style="width:6%">a</th>
<th style="width:8%">Standing</th>
<th style="width:8%">strk</th>
</tr>
<tr>
<td style="width:26%">Team 1</td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%">3</td>
<td style="width:6%">7</td>
<td style="width:6%"></td>
<td style="width:8%"></td>
<td style="width:8%"></td>
</tr>
<tr>
<td style="width:26%">Team 1</td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%">12</td>
<td style="width:6%">86</td>
<td style="width:6%"></td>
<td style="width:8%"></td>
<td style="width:8%"></td>
</tr>
<tr>
<td style="width:26%">Team 1</td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%">3</td>
<td style="width:6%">33</td>
<td style="width:6%"></td>
<td style="width:8%"></td>
<td style="width:8%"></td>
</tr>
</table>
</div>

Angularjs using ng-repeat with <th> tag for repetitive column headers

I'm trying to create a table with multiple rows and one of the rows containing repetitive column headers like below.
I'm not sure how to use ng-repeat in angularjs to create these headers. I tried putting ng-repeat in <tr> element which obviously won't work as it creates multiples rows.
I also tried putting it in a <th> element but the headers won't appear alternatively.
I want to use ng-repeat (to display Current and Prior headers) rather than manually typing them like in the code below because number of times the the repetitive columns appear is dynamic (dependent on row 1).
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{ year }}
</th>
</tr>
<tr>
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</tr>
</thead>

There is ng-repeat start and end directive for this kind of situations:
angular.module("Test", []).controller("repetition",
function($scope)
{
$scope.years = function()
{
return [2017, 2018];
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="Test" ng-controller="repetition">
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{year}}
</th>
</tr>
<tr>
<th ng-repeat-start="year in years()" id="{{year}}planning" style="background-color:#EEEEEE" scope="col" class="tsub-head">Current</th>
<th ng-repeat-end id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</tr>
</thead>
<tbody></tbody>
</table>
Everithing in between the tags containing ng-repeat-start and ng-repeat-end will be included in the repetition.
By the way the same exists for ng-if (ng-if-start/ng-if-end)

Looking for the picture you provided, the solution lies in wrapping "current" and "prior" <th> with a <div> with ng-repeat directive. Like this:
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{year}}
</th>
</tr>
<tr>
<div ng-repeat="year in years()">
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</div>
</tr>
</thead>

How to perform an action for dynamic data by clicking on checkbox in a table

I'm using bootstrap table. In that I want to perform an action when i click on checkbox in table to get Item ID value.
<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="data/g3.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" >Item ID</th>
<th data-field="name" data-sortable="true">Product Name</th>
<th data-field="price" data-sortable="true">Actual Price</th>
<th data-field="discount_price" data-sortable="true">Discount Price</th>
<th data-field="stock_avail" data-sortable="true">Stock Available</th>
</tr>
</thead>
</table>
Jquery function :
$("input[name='btSelectItem']").on("click","input[name='btSelectItem']",function(){
alert("Hello");
var values = "";
$.each($("input[name='btSelectItem']:checked"), function(index, value) {
var data = $(this).parents('tr:eq(0)');
if(index > 0)
values ++;
values +=$(data).find('td:eq(1)').text();
});
alert(values);
});
When i click on checkbox my function was not calling, Kindly help me to resolve this. Thanks in advance
Below is my table Code :
<table id="eventsTable" class="table table-striped table-hover" data-id-field="id" data-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-show-refresh="true" data-search="true" data-url="data/g3.json" data-height="300" data-toggle="table" style="margin-top: -41px;">
<thead>
<tbody>
<tr class="selected" data-index="0">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="0">
</td>
<td style="">Test</td>
<td style="">21</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">High</td>
<td style="">100</td>
</tr>
<tr data-index="1">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="1">
</td>
<td style="">Test2</td>
<td style="">26</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">Medium</td>
<td style="">50</td>
</tr>
<tr data-index="2">
<tr data-index="3">
<tr data-index="4">
<tr data-index="5">
<tr data-index="6">
<tr data-index="7">
</tbody>
</table>

Besides the selector was wrong, the problem is that bootstrap table js code captures the event when you click and stops its propagation, so it never bubbles up and you can't capture on a document level.
The good news is that it provides an API to capture such events. In this case you can use several events like onCheck, onCheckSome, as noted in the docs, e.g.:
$('#table-style').on("check.bs.table", myFunc);

Since you're already attaching the event handler to the input element, you don't need any further filter in on.
Try with:
$(document).on("click", "input[name='btSelectItem']", function(){ ... })

Get value of hidden label in table using jquery?

I have an html table within a list view, and have a hidden label in it called "vehicle_num". I am able to get the selected row of the table, as well as any of the td, however I cannot seem to get the value of the label. I have tried:
var vehicle_number = $(this).closest('tr').children('#vehicle_num').text();
Below is the code for the listview. How can I get the value of the label?
<asp:ListView ID="lvEquipmentList" runat="server" DataKeyNames="vehicle_number">
<LayoutTemplate>
<table id="table-equipment-list" class="table table-list">
<thead>
<tr>
<th scope="col" class="product-line">Product line</th>
<th scope="col" class="model-number">Model #</th>
<th scope="col" class="serial-number">Serial #</th>
<th scope="col" class="dar-status">DAR Status</th>
<th scope="col" class="ship-date">Ship Date</th>
</tr>
</thead>
<tbody>
<asp:PlaceHolder ID="ItemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th>
<td class="model-number"><%#Eval("model")%><label class="vehicle_num" hidden="hidden"><%#Eval("vehicle_number")%></label></td>
<td class="serial-number"><%#Eval("serial_number")%></td>
<td class="dar-status"><img src='<%#Eval("display_status") %>'/></td>
<td class="ship-date"><%#Eval("date")%></td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<table id="table-equipment-list" class="table table-list">
<thead>
<tr>
<th scope="col" class="product-line">Product line</th>
<th scope="col" class="model-number">Model #</th>
<th scope="col" class="serial-number">Serial #</th>
<th scope="col" class="dar-status">DAR Status</th>
<th scope="col" class="ship-date">Ship Date</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="product-line"><div class="icon"></div> <span class="line-title"></span></th>
<td class="model-number"></td>
<td class="serial-number"></td>
<td class="dar-status"></td>
<td class="ship-date"></td>
</tr>
</tbody>
</table>
</EmptyDataTemplate>
</asp:ListView>
EDIT
I have edited the code above to put the label in a table column. I was able to get the value using:
var vehicle_number = $(this).closest('tr').find('.vehicle_num').text();

This is invalid markup:
<tr>
<th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th>
<td class="model-number"><%#Eval("model")%></td>
<td class="serial-number"><%#Eval("serial_number")%></td>
<td class="dar-status"><img src='<%#Eval("display_status") %>'/></td>
<td class="ship-date"><%#Eval("date")%></td>
<label id="vehicle_num" hidden="hidden" runat="server"><%#Eval("vehicle_number")%></label>
</tr>
There's an errant label as a child of a tr, which isn't valid. When the browser tries to make sense of this, it could be doing anything with that label to construct a valid DOM, which is going to effect your jQuery selectors.
The label needs to be in a table cell:
<tr>
<th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th>
<td class="model-number"><%#Eval("model")%></td>
<td class="serial-number"><%#Eval("serial_number")%></td>
<td class="dar-status"><img src='<%#Eval("display_status") %>'/></td>
<td class="ship-date"><%#Eval("date")%></td>
<td><label id="vehicle_num" hidden="hidden" runat="server"><%#Eval("vehicle_number")%></label></td>
</tr>
(Or, if it's always hidden anyway, you can probably put it in an existing table cell. Either way should work.)
Additionally, if the client-side id is being explicitly set here, then any repetition of these records will result in duplicate ids in the DOM, which is also invalid. Different browsers respond to id-based selectors in different ways when there are duplicate ids, because the behavior is undefined. You probably want to use a class instead:
<label class="vehicle_num" ...
Since the label is no longer a child of the tr but rather a descendant of it, use find() instead of children():
$(this).closest('tr').find('.vehicle_num')