I am having trouble changing the classes for a table row.
My HTML
<table class="table table-light table-bordered text-center">
<thead class="thead-dark">
<tr>
<th scope="col">Ava</th>
<th scope="col">Full name</th>
<th scope="col">Registred</th>
</tr>
</thead>
<tbody>
{{#users}}
<tr class="table-light" id="colorised">
<td><img src="{{avaUrl}}" width="42" height="42"/></td>
<td>{{username}}</td>
<td>{{registeredAt}}</td>
</tr>
{{/users}}
</tbody>
{{^users}}
</br>
<strong style="color: orange">No results for "{{searchedUsername}}"</strong>
</br>
</br>
{{/users}}
</table>
And JavaScript
<script>
$('#colorised').attr('class','table-success');
</script>
How can I change the colour of the table row ?
You could toggle between the classes to switch them over:
$('#colorised').toggleClass('table-light table-success');
To execute your code after the DOM has finished loading so that it is ready for access or modification you need to wrap your jQuery code inside $(document).ready(function() {});. It is assumed that your code is located before DOM elements such as in the tag or in the top or middle of the section before some DOM elements and that code does attempt to access the DOM upon first initialization.
So that it should be placed into a $(document).ready() block so it will not execute before the DOM is ready.The short hand for $(document).ready() is $(function() {}); Here is an example for the code provided by you.
$(function() {
$('#colorised').attr('class','table-success');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-light table-bordered text-center">
<thead class="thead-dark">
<tr>
<th scope="col">Ava</th>
<th scope="col">Full name</th>
<th scope="col">Registred</th>
</tr>
</thead>
<tbody>
{{#users}}
<tr class="table-light" id="colorised">
<td><img src="{{avaUrl}}" width="42" height="42"/></td>
<td>{{username}}</td>
<td>{{registeredAt}}</td>
</tr>
{{/users}}
</tbody>
{{^users}}
</br>
<strong style="color: orange">No results for "{{searchedUsername}}"</strong>
</br>
</br>
{{/users}}
</table>
Related
I'm creating <tr> dynamically and append this tr to <tbody> with jquery append method.
The <table> is created inside modal whenever I open modal without refreshing the page the same <tr> appending again and again to the old <tr>.
TABLE inside modal
<table class="table table-bordered tablesorter" id="work_aval">
<thead>
<tr>
<th rowspan="1" colspan="8" class="text-center"></th>
</tr>
<tr>
<th rowspan="1" colspan="8" class="text-center">It is necessary to have some element of weekend availability. If you tick the weekends this could be applied as alternate as well
</th>
</tr>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
AJAX call for <tr> append
$("#work_aval tbody").append(response.availability);
Can you please try html() instead of append() method?
Ex:
$("#work_aval tbody").html(response.availability);
$('#work_aval tbody').empty();
This line works for me.
Thanks
i have a basic html table with some data displayed, what i want is when i click on specific row the value of incident Id cell is passed to the hidden variable value i have developed this part, what i don't know how can i put hidden variable value in the session for other functionality purposes.
my table
<div id="tab1" class="tab active">
<table class="table table-striped">
<thead style="background-color: #F0F1F2">
<tr>
<th>Incident Id</th>
<th>Party Name</th>
<th>Max Rank</th>
<th>Incident Description</th>
</tr>
</thead>
<tbody>
<c:forEach items="${incidents}" var="incident">
<tr id="tr" onclick="changeIncidentValue(${incident.incidentId})">
<td>${incident.incidentId}</td>
<td>xxx</td>
<td>${incident.partyNameMaxRank}</td>
<td>${incident.incidentDesc}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<input type="hidden" id="incidentId" name="incidentId" value=""/>
js function
<script>
function changeIncidentValue(incidentId){
$('#incidentId').val(incidentId);
var x = $('#incidentId').val();
console.log(x);
}
</script>
For simplicity of the example I have a DataTable which I load from HTML.
This DataTable is having parts of its content updated through jQuery BUT the updated content while visible in the table, does not reflect when sorting or filtering.
See html code below
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Votes</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<th>John</th>
<th>Doe</th>
<th id="entry1_votes">50</th>
<th>London</th>
</tr>
<tr>
<th>Hill</th>
<th>Vaught</th>
<th id="entry2_votes">120</th>
<th>Berlin</th>
</tr>
<tr>
<th>Charles</th>
<th>Roy</th>
<th id="entry3_votes">78</th>
<th>Liege</th>
</tr>
</tbody>
</table>
and javascript
$(document).ready(function() {
var dt = $('#example').DataTable({});
$("#entry2_votes").text(60);
});
So if you try sorting Votes column or try filtering by the new value 60 set through jQuery it wont work
See this working example https://jsfiddle.net/bpali/d97bpqvs/3/
Obviously, my question is how to make it work as in my real life situation I have to update parts of the DataTable constantly through different Ajax requests of different page sections and I cannot just put an ajax source on the table and reload the table.
This is the correct way:
$(document).ready(function() {
var dt = $('#example').DataTable({});
dt.cell( $("#entry2_votes") ).data(60) ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Votes</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<th>John</th>
<th>Doe</th>
<th id="entry1_votes">50</th>
<th>London</th>
</tr>
<tr>
<th>Hill</th>
<th>Vaught</th>
<th id="entry2_votes">120</th>
<th>Berlin</th>
</tr>
<tr>
<th>Charles</th>
<th>Roy</th>
<th id="entry3_votes">78</th>
<th>Liege</th>
</tr>
</tbody>
</table>
Fiddle: https://jsfiddle.net/HappyiPhone/d97bpqvs/7/
Check online demo
You have to reinitialize data table after updating with jquery or you can update by datatable in-built methods/api
$('#example').DataTable().destroy();
$('#example').DataTable().draw();
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(){ ... })
I have a table as follows. How to reset the table using jQuery to its original state during on change(with all th,tds). Not to reload the entire page because I have another tables also. I tried with dataTables but it adds search filters and paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th>
<td id="fp" style="text-align:right">0</td>
<td id="fr" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="fpT">0.00</div>
</td>
</tr>
<tr>
<th >Fractional</th>
<td id="fr" style="text-align:right">0</td>
<td id="frN" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div id="frT" style="float:right">0.00</div>
</td>
</tr>
<tr>
<th >Premium</th>
<td id="pRate" style="text-align:right">0</td>
<td id="pNos" style="text-align:center">0%</td>
<td>
<div style="float:left">$</div>
<div id="pTotal" style="float:right">0.00</div>
</td>
</tr>
<tr class="active">
<th>Premium Discount</th>
<td style="text-align:right" id="premium-discount-rate">0</td>
<td style="text-align:center">
<select id="premium-disc-list">
<option value=""></option>
</select>
</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="premium-discount-total">0.00</div>
</td>
</tr>
</tbody>
</table>
jQuery
var table = $('#t01').dataTable();
//table.clear().draw();
//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();
I have 2 options in my mind:
1) You can mark all the elements that could be reset with some 'resetable' class and add data-original-val property, and once you decide to reset it do something like that:
$('.resetable','#t01').each(function(){
var originalVal = $(this).data('original-val');
$(this).html(originalVal);
})
2) Render another copy of the table inside type="text/html" script like this:
<script type="text/html" id="t01-original">
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
...
</table>
</script>
this way all the content of the script tag won't be parsed and you won't have duplicate id issues. On the reset simply replace the content of the table with the one from the script:
//t01-container is the id of div that wraps the table:
$( '#t01-container').html($('#t01-original').html());