Arranging The html Tables using Jquery

Arranging The html Tables using Jquery - javascript

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

Related

jQuery highlight background base on cell value

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>

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>

Javascript search table rows but ignore search on the hidden collapsible accordion rows

I have a table, there is a toggle feature that uses accordion collapse rows. I have a search function in javascript, but when you search text and that text is not in the hidden rows the toggle doesn't work. It won't display the hidden rows unless there is the search text. Please help!
i need it to do this but with javascript not ajax... http://www.cscc.edu/_resources/app-data/datatables/examples/api/row_details.html
My table has two hidden tables, each with a header, within it...
i can id the tr's of the collapsible rows.
So for each row in the table, there are two tables that expand when user select toggler. Two headers will display even if no rows.
Below is javscript for the search functionality that i need to have not search on the collapsible tables
<script type="text/javascript">
$(document).ready(function () {
$(".search").keyup(function () {
var searchTerm = $(".search").val();
var listItem = $('.results tbody').children('tr');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
$.extend($.expr[':'], {
'containsi': function (elem, i, match, array) {
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function (e) {
$(this).attr('visible', 'false');
});
$(".results tbody tr:containsi('" + searchSplit + "')").each(function (e) {
$(this).attr('visible', 'true');
});
var jobCount = $('.results tbody tr[visible="true"]').length;
$('.counter').text(jobCount + ' item');
if (jobCount == '0') { $('.no-result').show(); }
else { $('.no-result').hide(); }
});
});
</script>
html...
<div class="form-group pull-right">
<input type="text" class="search form-control" placeholder="What you looking for?" id="search">
</div>
<span class="counter pull-right"></span>
<table class="table table-hover table-bordered results" id="table">
<thead>
<tr>
<th> </th>
<th>Obj ID</th>
<th>Obj</th>
<th>Init ID</th>
<th>Init</th>
</tr>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo_1" class="accordion-toggle">
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
<td scope="row">1</td>
<td>Obj 1</td>
<td scope="row">1</td>
<td>Task 1</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="demo_1">
<table class="table table-striped">
<thead>
<tr style="background-color: darkgrey" id="header_1">
<th>Update ID</th>
<th>Stop Light</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr style="background-color: lightgrey" id="update_1">
<th scope="row">1</th>
<td>Notes for Update 1</td>
<td>Other Notes for Update 1</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<table class="table table-striped">
<thead>
<tr style="background-color: darkgrey" id="header_2" >
<th>Target Quarter</th>
<th>Added By</th>
<th>Added On</th>
</tr>
</thead>
<tbody>
<tr style="background-color: lightgrey" id="target_1">
<th scope="row">1</th>
<td>User 1</td>
<td>1/1/2017</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Remove table if it has a row with "NA" values

I've HTML code like this`
<h4 id="dd">Resource usage</h4>
<table border="1" class="dataframe table table-striped table-bordered table-hover">
<thead>
<tr style="text-align: right;">
<th>peak_value</th>
<th>resource_name</th>
</tr>
</thead>
<tbody>
<tr>
<td>NA</td>
<td>NA</td>
</tr>
<tr>
<td>NA</td>
<td>NA</td>
</tr>
</tbody>
</table>
I'm fetching the table from database.So, the data is dynamically created.
Now I don't want to show table if it has entire row with only "NA" values (i.e)., value NA using javascript.
Please help me out here

You can iterate over the td elements and see if there is any element with a non NA value, if not hide the table like
var table = document.querySelector('#dd + table');
var toShow = Array.from(table.querySelectorAll('td')).some(td => td.innerHTML.trim() != 'NA');;
if (!toShow) {
table.style.display = 'none';
}
<h4 id="dd">Resource usage</h4>
<table border="1" class="dataframe table table-striped table-bordered table-hover">
<thead>
<tr style="text-align: right;">
<th>peak_value</th>
<th>resource_name</th>
</tr>
</thead>
<tbody>
<tr>
<td>NA</td>
<td>NA</td>
</tr>
<tr>
<td>NA</td>
<td>NA</td>
</tr>
</tbody>
</table>
Demo: Fiddle
If you want to handle row wise
var table = document.querySelector('#dd + table');
var tableHasNonNAValue = false;
Array.from(table.querySelectorAll('tbody tr')).forEach(tr => {
var hasNonNAValue = Array.from(tr.querySelectorAll('td')).some(td => td.innerHTML.trim() != 'NA');
tableHasNonNAValue = tableHasNonNAValue || hasNonNAValue;
if (!hasNonNAValue) {
tr.style.display = 'none';
}
});
if (!tableHasNonNAValue) {
table.style.display = 'none';
}
<h4 id="dd">Resource usage</h4>
<table border="1" class="dataframe table table-striped table-bordered table-hover">
<thead>
<tr style="text-align: right;">
<th>peak_value</th>
<th>resource_name</th>
</tr>
</thead>
<tbody>
<tr>
<td>NA1</td>
<td>NA</td>
</tr>
<tr>
<td>NA</td>
<td>NA</td>
</tr>
</tbody>
</table>
Demo: Fiddle

Use jQuery.filter to filter all td elements having text as "NA"
Check length of the filtered collection with length of the td elements in respective tr element
If tr had td elements and length is equal, hide() the tr element.
$('tr').each(function() {
var tdElems = $(this).find('td');
var filtered = tdElems.filter(function() {
return this.textContent.trim() === 'NA';
});
if (tdElems.length && (filtered.length === tdElems.length)) {
$(this).hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 id="dd">Resource usage</h4>
<table border="1" class="dataframe table table-striped table-bordered table-hover">
<thead>
<tr style="text-align: right;">
<th>peak_value</th>
<th>resource_name</th>
</tr>
</thead>
<tbody>
<tr>
<td>NA</td>
<td>NA</td>
</tr>
<tr>
<td>NA</td>
<td>NA</td>
</tr>
</tbody>
</table>

JQuery html table search by many attributes

I would like to search by three attributes on each row.
I am able to search by one attribute, like this:
var rows = $("#tbl1 > tbody > tr[cName=1]");
But this throws error:
var rows = $("#tbl1 > tbody > tr[cName=1,cLastN=2]");
How to search by all three attributes?
$("#btn1").click(function(){
debugger;
var rows = $("#tbl1 > tbody > tr[cName=1]");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl1' >
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr cName='1' cLastN='2' cMiddleN='3'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr cName='2' cLastN='2' cMiddleN='4'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr cName='5' cLastN='7' cMiddleN='3'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<button id="btn1">Search</button>

.You need to include the attribute selectors separately, depending on your requirement. If you want to select any element with either attribute (ie. OR logic) use this:
var rows = $('#tbl1 > tbody > tr[cName="1"], #tbl1 > tbody > tr[cLastN="2"]');
Whereas if you want elements with both attributes (ie. AND), use this:
var rows = $('#tbl1 > tbody > tr[cName="1"][cLastN="2"]');
Also be aware that you're using completely non-standard attributes which can cause issues with JS. I'd suggest changing them to data-* attributes instead.

You can use commas (,) to perfom OR selectors
$("#btn1").click(function(){
debugger;
var rows = $("#tbl1 > tbody > tr[cName=1] , #tbl1 > tbody > tr[cName=2], #tbl1 > tbody > tr[cName=3]");
console.log(rows)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl1' >
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr cName='1' cLastN='2' cMiddleN='3'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr cName='2' cLastN='2' cMiddleN='4'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr cName='5' cLastN='7' cMiddleN='3'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<button id="btn1">Search</button>

We Keep Coding

JavaScript is the programming language of the Web.

Arranging The html Tables using Jquery - javascript

Related

jQuery highlight background base on cell value

filter in jquery to show only firstname td value

Javascript search table rows but ignore search on the hidden collapsible accordion rows

Remove table if it has a row with "NA" values

JQuery html table search by many attributes

Categories

Resources