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>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a table which is added by user having to columns from and every time new values are entered by user it should check whether the to value matches the next from values otherwise the cells should be highlighted. it should be pure javacript.
enter link description here
<table class="table">
<thead>
<tr>
<th>From</th>
<th>To</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>50</td>
</tr>
<tr>
<td>50</td>
<td>200</td>
</tr>
<tr>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>310</td>
<td>400</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
</tr>
<tr>
<td>500</td>
<td>800</td>
</tr>
<tr>
<td>850</td>
<td>978</td>
</tr>
<tr>
<td>978</td>
<td>1000</td>
</tr>
</tbody>
</table>
function GetCellValues()
{
var table = document.getElementById('mytable');
for (var i= 0, i= table.rows.length; i++)
{
if(table.cell[i]==table.cell[i+1){
table.cell[i].style.color = red;
}}}
You can for example loop through the rows and then check if the current first cell in the row is not equal to the previous last cell row. Something like:
function GetCellValues() {
var table = document.getElementById("mytable");
let previous = "0";
for (let i = 1; i < table.rows.length; i++) {
if (previous !== table.rows[i].cells[0].innerText) {
table.rows[i].cells[0].style.color = "red";
}
previous = table.rows[i].cells[1].innerText;
}
}
GetCellValues();
table,
th,
td {
border: 1px solid black;
}
<table id="mytable" class="table">
<thead>
<tr>
<th>From</th>
<th>To</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>50</td>
</tr>
<tr>
<td>50</td>
<td>200</td>
</tr>
<tr>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>310</td>
<td>400</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
</tr>
<tr>
<td>500</td>
<td>800</td>
</tr>
<tr>
<td>850</td>
<td>978</td>
</tr>
<tr>
<td>978</td>
<td>1000</td>
</tr>
</tbody>
</table>
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>
I need to split one table row into multiple row when calling a js function
This is the table:
<table id="tab_calc">
<tr class="tr_calc">
<td>Sub Total</td>
<td>Tax</td>
<td>Freight</td>
<td>Insurance</td>
<td>Discount</td>
<td>Total</td>
<td>Amt Paid</td>
<td>Bal Due</td>
</tr>
I want to make it look like this after I call a function:
<table id="tab_calc">
<tr>
<td>Sub Total</td>
</tr>
<tr>
<td>Tax</td>
</tr>
<tr>
<td>Freight</td>
<td>Insurance</td>
<td>Discount</td>
</tr>
<tr>
<td>Total</td>
</tr>
<tr>
<td>Amt Paid</td>
</tr>
<tr>
<td>Bal Due</td>
</tr>
</table>
Try below code:
fiddler
$(document).ready(function(){
$('.tr_calc').replaceWith( $('.tr_calc').html()
.replace(/<td>/gi, "<tr> <td>")
.replace(/<\/td>/gi, "</td></tr>")
);
});
I have a html-table, that has a header, that is supposed to be clickable to sort the rows on the clicked column. The tricky part here is, that there are some rows in the table, that shouldn't be sorted and the rows, that belong to that specific row should remain under that row. Here is some code so you get what I'm talking about.
<table>
<thead>
<tr>
<th>User</th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Peter</th>
</tr>
<tr>
<td></td>
<td>Apple</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>Pineapple</td>
<td>15</td>
</tr>
<tr>
<th colspan="5" style="text-align:left;">Stan</th>
</tr>
<tr>
<td></td>
<td>Banana</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>Orange</td>
<td>10</td>
</tr>
</tbody>
</table>
So if I click for example on the Item-Header, the Apple + Pineapple rows should remain between the Peter and the Stan row while being sorted. If I click on the User-Header, Peter and Stan should be sorted, while the Items Apple + Pineapple remain under the Peter row and the Banana and Orange Items remain under the Stan row ... I hope you get what I mean.
I have already tried it with the jquery tablesorter-plugin but I couldn't find any solution that was working for me.
You'll need to enclose each block of rows in a separate tbody.
Then clicking on User will only sort the tbodys, and clicking on the other ths will sort each tbody separately.
EDIT
The table should look like this:
<table>
<thead>
<tr>
<th>User</th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Peter</th>
</tr>
<tr>
<td></td>
<td>Apple</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>Pineapple</td>
<td>15</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Stan</th>
</tr>
<tr>
<td></td>
<td>Banana</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>Orange</td>
<td>10</td>
</tr>
</tbody>
I am nesting tables within tables and want to toggle the them when you click on a <th class="folder">
$('table').each(function(){
$('th.folder', this).bind('click', function(){
$(this).closest('table').children('tbody').toggle();
});
});
Here is some typical HTML:
<table>
<thead>
<tr>
<th>Title</th>
<th class="type">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<thead>
<tr>
<th class="folder" colspan="2">Deal flow</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 1</td>
<td>image</td>
</tr>
<tr>
<td>item 2</td>
<td>image</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th class="folder" colspan="2">Rejected deals</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 3</td>
<td>image</td>
</tr>
<tr>
<td>item 4</td>
<td>image</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Doesn't seem to work and I can't figure out why! Any ideas?
See Working Example
Try this instead:
$('.folder').bind('click', function(){
$(this).closest('table').children('tbody').toggle();
});
Your context is wrong, try just $('th.folder');
Also, I would use live() instead of bind() since live() is faster.