jQuery highlight background base on cell value - javascript

A record with new and old price value,
if new price is different to old one, and highlight the record.
I want to use "setTimeout" function,and the highlight effects will disappear after 10s. How can I highlight the table rows base on values?
I use the jQuery-UI framework.
$(function(){
setTimeout(change(), 3000);
});
function change(){
$(".table-striped").find("tr").each(function () {
$("td").filter(function() {
return $(this).text().indexOf("200") != -1;
}).parent().toggleClass("highlight",5000).removeClass("highlight");
});
}
<table class="table table-striped">
<thead>
<tr>
<th>New Price</th>
<th>Old Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
<td>1000</td>
</tr>
<tr>
<td>1000</td>
<td>1000</td>
</tr>
</tbody>
</table>
.highlight {
background: red !important;
color: green !important;
}

I have solved your issue with jquery please check my answer.
$(document).ready(function(){
$('tbody tr').each(function( i, val){
var nprice = $(this).children('.new_price').html();
var oprice = $(this).children('.old_price').html();
if(nprice != oprice){
$(this).addClass('divtoBlink');
//$(this).children('td').css('background-color','red');
}
});
setInterval(function () {
$(".divtoBlink").css("background-color", function () {
this.switch = !this.switch
return this.switch ? "red" : ""
});
}, 100);
setInterval(function () {
$('tr').removeClass('divtoBlink').css('background-color','white');
}, 5000)
});
.divtoBlink {
width:100px;
height:20px;
background-color:#627BAE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th class="text-center">Id#</th>
<th>Session Eamil</th>
<th>Login Url</th>
<th>Date</th>
<th>Status</th>
<th>New Price</th>
<th>Old Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">#counter11</td>
<td>#item.SessionEmail11</td>
<td>#item.LoginUrl11</td>
<td>#item.CreatedAt11</td>
<td>Failed11</td>
<td class="new_price">200</td>
<td class="old_price">1000</td>
</tr>
<tr>
<td class="text-center">#counter12</td>
<td>#item.SessionEmail12</td>
<td>#item.LoginUrl12</td>
<td>#item.CreatedAt12</td>
<td>Failed12</td>
<td class="new_price">1000</td>
<td class="old_price">1000</td>
</tr>
</tbody>
</table>

Is this what you are looking for? I made it highlight using jquery ui's "highlight" effect with a timeout of 10 seconds as you wished.
Code below :
$(function(){
var elementToHighlight = '';
$(".table-striped tbody tr").each(function(i, el) {
if ($(el).children(':first').html() != $(el).children(':last').html()) {
if (i == $(".table-striped tbody tr").length - 1) {
elementToHighlight += '.table-striped tbody > :eq(' + $(el).children(':first').parent().index() + ')';
} else {
elementToHighlight += '.table-striped tbody > :eq(' + $(el).children(':first').parent().index() + '), ';
}
}
});
if (elementToHighlight.substr(-2) == ', ') {
elementToHighlight = elementToHighlight.substr(0, elementToHighlight.length-2)
}
var blink = setInterval(function(){
$(elementToHighlight).effect('highlight', {color: 'red'}, 1000);
}, 1000);
setTimeout(function() {
clearInterval(blink);
}, 10000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>New Price</th>
<th>Old Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
<td>1000</td>
</tr>
<tr>
<td>1000</td>
<td>1000</td>
</tr>
<tr>
<td>400</td>
<td>1000</td>
</tr>
<tr>
<td>500</td>
<td>500</td>
</tr>
<tr>
<td>700</td>
<td>700</td>
</tr>
<tr>
<td>200</td>
<td>900</td>
</tr>
</tbody>
</table>

Related

Dynamically add column to table and it's td's

I have a table that is already defined and populated. Now what I'm trying to do is to find a specific column and after that create a new column, at the moment I have the code to handle this:
$(document).ready(function() {
something();
});
function something() {
var newTh = "";
var th = $(`#tblTable th[data-something="1"]`).last();
newTh = `<th data-something="1-1">
New Column
</th>`;
th.after(newTh);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
<thead>
<tr>
<th>Id</th>
<th data-something="1">Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="tblBody">
<tr>
<td>1</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>100</td>
</tr>
</tbody>
</table>
The column is added properly but it's keeping the value from the pre-existing column. What can I do to move the content after/before adding a new column?
You can get the index of th element, and then you can find each tr to append New Column td value. Like below:
$(document).ready(function() {
something();
});
function something() {
var newTh = "";
var th = $(`#tblTable th[data-something="1"]`).last();
var index = th.index();
newTh = `<th data-something="1-1">New Column</th>`;
th.after(newTh);
$("#tblBody").find("tr").each(function(){
var tr = $(this);
tr.find("td").eq(index).after(`<td>new column value</td>`);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
<thead>
<tr>
<th>Id</th>
<th data-something="1">Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="tblBody">
<tr>
<td>1</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>100</td>
</tr>
</tbody>
</table>
The easiest method would be to add another <td> in each <tr> and copy the text into the new <td>.
This works because each <th> must be at the same index as each <tr>.
$(document).ready(function() {
something();
});
function something() {
const th = $('#tblTable th[data-something="1"]').last();
th.after('<th data-something="1-1">New Column</th>');
$('#tblTable tbody').children().each(function() {
$(this).children().eq(th.index()).after('<tr></tr>');
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
<thead>
<tr>
<th>Id</th>
<th data-something="1">Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="tblBody">
<tr>
<td>1</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>100</td>
</tr>
</tbody>
</table>

filter in jquery to show only firstname td value

$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").parent().siblings(":first").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Filterable Table</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
Trying to Type something in the input field to search the table for first names
Filtering firstname's td to show only first name matches value into the table. I tried but does not work pls guide
Also explain what's wrong in my code
thanks
If you want to search in the FirstName only. Use can use the following code:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).find("td:first").text().toLowerCase().indexOf(value) > -1)
});
});
});
Remove .parent().siblings(":first") and add .find("td:first") to search for the first td in each row, aka firstname
Demo
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).find("td:first").text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Filterable Table</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>

Automatically get info for ::before element with JavaScript

I've been trying to figure out a wait to get this to work with having multiple tables on a single web page.
<table class="table table-striped basic">
<thead>
<tr>
<th>Saturday</th>
<th class="time">10:30am</th>
<th class="time">11:00am</th>
<th class="time">11:30am</th>
<th class="time">12:00pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<script>
var time = $('.time').text();
$(function() {
$('table td:nth-child(2)').attr('data-before-content', time);
$('table td:nth-child(3)').attr('data-before-content', time);
$('table td:nth-child(4)').attr('data-before-content', time);
$('table td:nth-child(5)').attr('data-before-content', time);
});
</script>
CSS:
.table td:nth-child(2)::before {
content: attr(data-before-content);
}
Trying to figure out a way to get the context of each "th" and place it ::before in the CSS while having multiple tables. Any suggestions?
Are you thinking something along the lines of this? You can use a combination of .each(), .eq(), and .not()
$('table tr').each(function(){
$('td', this).not(':first-child').each(function(i){
$(this).attr('data-before-content', $('.time').eq(i).text());
});
});
.table td:before {
content: attr(data-before-content) '\00a0';
}
.table td {
padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped basic">
<thead>
<tr>
<th>Saturday</th>
<th class="time">10:30am</th>
<th class="time">11:00am</th>
<th class="time">11:30am</th>
<th class="time">12:00pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
</tbody>
</table>
In case the .time data is table specific (which is more likely the case I would think), I'd recommend using this instead:
$('table tr').each(function(){
var $t = $(this).closest('table').find('.time');
$('td', this).not(':first-child').each(function(i){
$(this).attr('data-before-content', $t.eq(i).text());
});
});
.table td:before {
content: attr(data-before-content) '\00a0';
}
.table td {
padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped basic">
<thead>
<tr>
<th>Saturday</th>
<th class="time">10:30am</th>
<th class="time">11:00am</th>
<th class="time">11:30am</th>
<th class="time">12:00pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
</tbody>
</table>
<table class="table table-striped basic">
<thead>
<tr>
<th>Monday</th>
<th class="time">7:30pm</th>
<th class="time">9:00pm</th>
<th class="time">10:30pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/7/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
</tr>
<tr>
<td>3/7/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
</tr>
</tbody>
</table>
var time = $('.time'); returns an all the text of all element with the class .time. Instead, you should use something like $('.time:nth-child('+i+')').text() inside a for-loop.
<script>
var time = $('.time');
$(function() {
for(var i = 0, len=time.length; i<len; i++){
$('table td:nth-child(' +i+ ')').attr('data-before-content', $(time[i]).text());
}
});
</script>

How to total table based on specific column or index with jQuery?

I have a table like blow code:
<table class="somting">
<tr>
<th>Id</th>
<th>Item</th>
<th>Item Cost</th>
</tr>
<tr>
<td>1</td>
<td>Car</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Book</td>
<td>500</td>
</tr>
<tr>
<td>3</td>
<td>Pen</td>
<td>100</td>
</tr>
</table>
Now my problem is that how can I get the sub total of Item costs column
with jquery
I mean how to add 200+500+100
You can use :nth-child():
sum=0;
$('.somting td:nth-child(3)').each(function(){
sum += parseInt($(this).text());
})
//log sum
Working Demo
You add a class to item code row like
<tr>
<td>1</td>
<td>Car</td>
<td class="price">200</td>
</tr>
and then use
var total = 0;
$(".price").each(function(){
total += parseFloat( $(this).html());
});
see http://jsfiddle.net/8wqppuo6
<table class="somting">
<tr>
<th>Id</th>
<th>Item</th>
<th>Item Cost</th>
</tr>
<tr>
<td>1</td>
<td>Car</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Book</td>
<td>500</td>
</tr>
<tr>
<td>3</td>
<td>Pen</td>
<td>100</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var table = $("table.somting");
var tds = table.find("tr td:nth-child(3)");
var sum = 0;
$.each(tds, function(i, me){
var val = parseFloat($(me).text());
sum += val;
});
var append = '<tr><td></td><td></td><td class="price"> '+sum+'</td></tr>';
table.append(append);
});
</script>
Try this
tot = 0;
$('table.somting tr').each(function(index, elem) {
p = $(this).find(":nth-child(3)").html();
p = parseInt(p);
if (!isNaN(p)) {
tot = tot + p;
}
});
console.log(tot);
var sum =0;
$('table tr:not(:first)').each(function() {
var lasttd= $(this).find(':last-child')
sum+=parseInt(lasttd.text());
});
alert(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="somting">
<tr>
<th>Id</th>
<th>Item</th>
<th>Item Cost</th>
</tr>
<tr>
<td>1</td>
<td>Car</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Book</td>
<td>500</td>
</tr>
<tr>
<td>3</td>
<td>Pen</td>
<td>100</td>
</tr>
</table>
Use this:
<script>
$(document).ready(function() {
var table = $("table.somting");
var tds = table.find("tr td:nth-child(3)");
var sum = 0;
$.each(tds, function(i, me){
var val = parseFloat($(me).text());
sum += val;
});
var append = '<tr><td></td><td></td><td class="price"> '+sum+'</td></tr>';
table.append(append);
});
</script>

Arranging The html Tables using Jquery

Lets say I have this table:
<table class="table table-striped table-bordered table-condensed">
<tr>
<th><h1>Tracks</td></th>
</tr>
<tr>
<th>Track Id</th>
<th>Artist</th>
<th>Track Name</th>
<th>Uploader</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Artist 1</td>
<td>Track Name 1</td>
<td>Uploader 1</td>
<td>Blocked</td>
</tr>
<tr>
<td>2</td>
<td>Artist 2</td>
<td>Track Name 2</td>
<td>Uploader 2</td>
<td>Visible</td>
</tr>
</table>
Through JQuery how would arrange the table rows depending on their value? lets say I want to show table rows that only contains a table data value. How would I do that through Jquery?
Here is an example:
$('#search').on('keyup', function() {
var val = $.trim(this.value).toLowerCase();
$('table > tbody > tr:gt(1)').hide();
if (val.length) {
$('table > tbody > tr:gt(1) > td').filter(function() {
return this.innerHTML.toLowerCase().indexOf(val) >= 0;
}).parent().show();
} else $('table > tbody > tr:gt(1)').show();
});
( this will give you some guideline )
Demo
Related refs:
.gt()
parent > child selector
.filter()
As a variant (DEMO):
HTML
<input id="search" type="text">
<table id="table" class="table table-striped table-bordered table-condensed">
<tr>
<th>Track Id</th>
<th>Artist</th>
<th>Track Name</th>
<th>Uploader</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Artist 1</td>
<td>Track Name 1</td>
<td>Uploader 1</td>
<td>Blocked</td>
</tr>
<tr>
<td>2</td>
<td>Artist 2</td>
<td>Track Name 2</td>
<td>Uploader 2</td>
<td>Visible</td>
</tr>
</table>
​JavaScript
$(document).ready(function () {
$('#search').keyup(function () {
$('#table tr').show();
var q = $(this).val().toLowerCase();
$('#table tr:not(:first)').each(function () {
var visible = false;
$('td', this).each(function () {
var content = $(this).text().toLowerCase();
if (content.indexOf(q) != -1) visible = true;
});
$(this).toggle(visible);
});
})
});​
DEMO

Categories