I have a table with the class .client-data which contains lots of rows and cells. I want to search the cells and compare if the inner text matches an input value and if true I want to jump the the nearest <tr> tag to the cell that matched the input. I am very new to jQuery so I may be way off here but so far I have the following code:
$('.client-data td').each(function findNext() {
var cellText = $(this).html();
var inputVal = $('#findField').val();
var goTo = cellText.closest('tr').attr('id');
if (cellText == inputVal) {
$(document).scrollTop( $(goTo).offset().top );
}
})
Is that possible?
Suppose this is your html:
<input type="text" id="i">
<table class="client-data">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Feb</td>
<td>$100</td>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>Mafdrch</td>
<td>$100</td>
</tr>
<tr>
<td>Mafsarch</td>
<td>$100</td>
</tr>
<tr>
<td>Macrch</td>
<td>$100</td>
</tr>
<tr>
<td>Mabxrch</td>
<td>$100</td>
</tr>
<tr>
<td>Mcxbarch</td>
<td>$100</td>
</tr>
<tr>
<td>Mxcbarch</td>
<td>$100</td>
</tr>
<tr>
<td>Mcbbxcarch</td>
<td>$100</td>
</tr>
</table>
your script for searching and scrolling:
// trigger on keyup
$("#i").keyup(function(){
var input = $(this).val();
// scroll to first td that has the input val
$('html, body').animate({
scrollTop: $(".client-data td:contains('"+input+"')").first().offset().top
}, 500);
})
check it out in action here: https://jsbin.com/toyecarigo/edit?html,console,output
Related
When the user clicks on the 'Number' column I want to be able to get the 'Name' column value in the same row. So for example if I clicked on '999' I would want to be able to get David.
$('#table').on('click', 'td:nth-child(2)', function()
{
row = $(this).text();
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
You can use $(this).closest('tr').find('td:first').text() to get the closest first td and its text.
If the wanted item is inside of the tr but you dont know the place or you want it dynamically, you can add a class or id to the name td and change the code to this $(this).closest('tr').find('#WantedRowId').text()
$('#table').on('click', 'td:nth-child(2)', function() {
alert($(this).closest('tr').find('td:first').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
You can find below a more appropriate solution that dynamically checks what is the "Name" column index and retrieves accordingly.
As such, if you insert other columns, like ID and what not, it'll still work without updating this specific logic.
$('#table').on('click', 'td:nth-child(2)', function()
{
$td = $(this);
indexCol = $td.closest('table').find('td:contains(Name)').index()
alert( $td.closest('tr').find('td').eq(indexCol).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
With help from this forum I created a table which hides groups of rows based on the current date. Which is great. I am now looking to combine this with a toggle button that shows the hidden dates. But with my very limited knowledge of Javascript I cannot get it done. Any ideas? This is what I have so far:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
$(document).ready(function(e) {
$('.event_display_table tbody').each(function(index, element) {
event_day = $(this).attr('data-date');
event_day = new Date(event_day);
today = new Date();
if(event_day.getTime() < today.getTime())
{
$(this).css('display','none');
}
console.log($(this).attr('data-date'));
});
});
</script>
</head>
And for the body:
<body>
<p>This is a paragraph which can be hidden by clicking the button.</p>
<button>Toggle between slide up and slide down for a p element, but I want it to toggle 'show previous/hidden' dates</button>
<p>This table below shows only event dates in the future. Which is what I want. But I also want to have a toggle button option which does show the previous events. Is this possible?</p>
<div class="table-responsive">
<table class="event_display_table" border="1" >
<thead>
<tr>
<th>Date</th>
<th>Event</th>
</tr>
</thead>
<tbody data-date="2018-03-13">
<tr>
<td>2018-03-13</td>
<td>My event detail 1</td>
</tr>
<tr>
<td>2018-05-14</td>
<td>My event detail 2</td>
</tr>
</tbody>
<tbody data-date="2018-05-13">
<tr>
<td>2018-05-13</td>
<td>My event detail 3</td>
</tr>
</tbody>
<tbody data-date="2018-05-15">
<tr>
<td>2018-05-15</td>
<td>My event detail 4</td>
</tr>
<tr>
<td>2018-06-27</td>
<td>My event detail 5</td>
</tr>
</tbody>
<tbody data-date="2018-06-15">
<tr>
<td>2018-06-15</td>
<td>My event detail 6</td>
</tr>
</tbody>
</table>
</div>
I would change the processing function to add a .in-past class to every <tbody> which has date's in the past. Those date's then can be hidden or shown based on the class of the table. Here's a snippet:
$(document).ready(function() {
$("button").click(function() {
$('.event_display_table').toggleClass('future-only');
});
});
$(document).ready(function(e) {
$('.event_display_table tbody').each(function(index, element) {
var event_day = $(this).data('date');
event_day = new Date(event_day);
today = new Date();
if (event_day.getTime() < today.getTime()) {
$(this).addClass('in-past');
}
});
});
.event_display_table.future-only .in-past {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a paragraph which can be hidden by clicking the button.</p>
<button>Toggle between slide up and slide down for a p element, but I want it to toggle 'show previous/hidden' dates</button>
<p>This table below shows only event dates in the future. Which is what I want. But I also want to have a toggle button option which does show the previous events. Is this possible?</p>
<div class="table-responsive">
<table class="event_display_table future-only" border="1">
<thead>
<tr>
<th>Date</th>
<th>Event</th>
</tr>
</thead>
<tbody data-date="2018-03-13">
<tr>
<td>2018-03-13</td>
<td>My event detail 1</td>
</tr>
<tr>
<td>2018-05-14</td>
<td>My event detail 2</td>
</tr>
</tbody>
<tbody data-date="2018-05-13">
<tr>
<td>2018-05-13</td>
<td>My event detail 3</td>
</tr>
</tbody>
<tbody data-date="2118-05-15">
<tr>
<td>2018-05-15</td>
<td>My event detail 4</td>
</tr>
<tr>
<td>2118-06-27</td>
<td>My event detail 5</td>
</tr>
</tbody>
<tbody data-date="2018-06-15">
<tr>
<td>2018-06-15</td>
<td>My event detail 6</td>
</tr>
</tbody>
</table>
</div>
I had to restructure your HTML table to make the appropriate js work:
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
$('.hidden').toggle()
});
});
$(document).ready(function(e) {
$('.event_display_table tbody tr td:first-child').each(function(index, element) {
var event_day = $(this).text();
event_day = new Date(event_day);
// I added this which will set the time of "event_day" to 00:00:00
event_day.setHours(0,0,0,0)
var today = new Date();
// I added this which will set the time of "today" to 00:00:00
today.setHours(0,0,0,0)
if(event_day < today) {
$(this).parent().hide()
$(this).parent().addClass('hidden');
}
});
});
Edited HTML:
<table class="event_display_table" border="1" >
<thead>
<tr>
<th>Date</th>
<th>Event</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018-03-13</td>
<td>My event detail 1</td>
</tr>
<tr>
<td>2018-05-14</td>
<td>My event detail 2</td>
</tr>
<tr>
<td>2018-05-13</td>
<td>My event detail 3</td>
</tr>
<tr>
<td>2018-05-15</td>
<td>My event detail 4</td>
</tr>
<tr>
<td>2018-06-27</td>
<td>My event detail 5</td>
</tr>
<tr>
<td>2018-06-15</td>
<td>My event detail 6</td>
</tr>
</tbody>
</table>
$(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>
This question already has answers here:
jQuery single selector vs .find()
(4 answers)
Closed 6 years ago.
I have a table which contains many rows. I need to find the td data using jquery.
There are many ways to get that data
1. $("table tr td").each(function(){})
2. $("table").find("tr").find("td").each(function(){})
Now I want to know which method in better and why?
Do profiling using console.time and console.timeEnd will give you ther performance in microseconds .
console.time('withSelector');
for(var i=0; i<10E4 ;i++)
$("table tr td");
console.timeEnd('withSelector');
the same for $("table").find("tr").find("td") .. Run snippet below 👇🏼
Result
Analysis :
With selector is better than find
function withSelector() {
$("table tr td");
}
function withFind() {
$("table").find("tr").find("td")
}
function run(fn, times) {
console.time(fn.name);
for(var i=0; i<times ;i++)
fn();
console.timeEnd(fn.name);
}
run(withSelector, 10E4);
run(withFind, 10E4);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Can you please take a look at This Demo and let me know how I can remove Only the <tr> which all of it's <td> has .old class?
I tried this code to do the job
$("#removeOld").on("click",function(){
$('tbody').find('tr').each(function () {
var rows = 0;
var rows_old = 0;
$(this).find('td').each(function () {
rows++;
if ($(this).has('old')) rows_old++;
});
if (rows === rows_old) $(this).remove();
});
});
but this is removing the whole table! can you please let me know what I am doing wrong and how I can fix this?
Thanks
You need to delete tr which does not have a td which is not td.old so
$("#removeOld").on("click", function() {
$('tbody tr').not(':has(td:not(.old))').remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="removeOld" type="button">Remove Entire Old Row!</button>
<table style="width:100%">
<tbody>
<tr>
<td class="old">Some Old</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>All New</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td class="old">Some Old</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td class="old">All Old</td>
<td class="old">Smith</td>
<td class="old">50</td>
</tr>
</tbody>
</table>