I have a table. Always multiple row in the table contain a attribute like selectrow="selectrow". For example 3rd and 4th row have selectrow="selectrow" attribute. Now i want to find out the index of last row that have selectrow="selectrow" attribute. I do not want to use each. I search for solution like this :
$("table > tbody > tr[selectrow='selectrow']:last-child").index();
This is html:
<table>
<tbody>
<tr >
</tr>
<tr>
</tr>
<tr selectrow="selectrow">
</tr>
<tr selectrow="selectrow">
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
In this example i want to get 4.
Try this : use :last which will give you last of the matched selection. :last-child will select the last child of table and try to match the other selection criteria (selectrow='selectrow' in your case) and when match not found then it will retrun -1.
$("table > tbody > tr[selectrow='selectrow']:last").index();
JSfiddle Demo
More Information on
:last
:last-child
Try this
$("table > tbody > tr[selectrow='selectrow']").last();
it will return the object of last tr.
Related
Say I have the following table:
<table width=200 border=1>
<tr>
<th>Ignore</th>
<th>Highlight</th>
<th>Ignore</th>
</tr>
<tr>
<td>yep</td>
<td>yep</td>
<td>yep</td>
</tr>
<tr>
<td>yep</td>
<td>yep</td>
<td>yep</td>
</tr>
</table>
and I want to highlight all Highlight columns. How do I do this based on the header text?
I realise it can be achieved by selecting the n'th child, but what to future proof it against likely column order changes.
$('body > table > tbody > tr > td:nth-child(2)').css('background-color', 'pink');
http://jsfiddle.net/8XSLF/
You need to get index of th has Highlight text. So use :contains() selector to selecting it and then use .index() to finding index of it. At the end, select every th and td has index equal to finded index.
Note that the :contains() selector select also element has unwanted text like Highlighted and Text Highlighted. If your table text isn't constant, use .filter() instead.
var i = $("table th:contains('Highlight')").index();
$("table tr th, table tr td").filter(function(){
return $(this).index() == i;
}).css("background", "pink");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width=200 border=1>
<tr>
<th>Ignore</th>
<th>Highlight</th>
<th>Ignore</th>
</tr>
<tr>
<td>yep</td>
<td>yep</td>
<td>yep</td>
</tr>
<tr>
<td>yep</td>
<td>yep</td>
<td>yep</td>
</tr>
</table>
Since you specified column name won't change, you can use jQuery.contains:
$( "body > table > tbody > tr > td:contains('Highlight')" ).css('background-color', 'pink');
Needed this highlighted in multiple tables: final solution
$("th:contains('Highlight')").each(function() {
$(this).closest('table').find('td:nth-child(' + ($(this).index() + 1) +')').css('background-color', 'pink');
});
Here I have a table
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr style="display:none">
<td>jones</td>
<td>.net</td>
</tr>
<tr style="display:none">
<td>James</td>
<td>SAP</td>
</tr>
<tr>
<td>Charles</td>
<td>Java</td>
</tr>
</tbody>
</table>
I want to get text of first row first td text which are visible using jquery, by
above table, I want result as "Charles".
How can get it. I have tried like
$("#table").closest('tbody').children('tr:first').find('td:first').text()
but not getting result.how can I?
Try to use :visible selector to get the visible rows,
$("#table tbody tr:visible:first td:first").text()
To get the visible one use the according :visible selector that jquery ships:
$('#table > tbody > tr:visible:first > td:first').text();
This is Worked for Me.
$('#table> tbody > tr:visible').first().find('td').first().text();
This is the HTML:
<table id="tblTestAttributes">
<thead>
<tr> <th>Head 1</th> <th>Head 2</th> </tr>
</thead>
<tbody>
<tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
<tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
<tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
</tbody>
</table>
This is the javascript to get the values of each row:
var frequencies = [];
if ($('#tblTestAttributes').length) {
$('#tblTestAttributes tr').each(function () {
var t = $(this).find('td[id^="txtDesc"]').text() + ";" + $(this).find('[id^="ddlFreq"] option:selected').val();
alert(t);
frequencies.push(t);
});
}
I want to avoid the first row, which contains th elements which are just display headers and don't contain any data.
So I changed the selector to this:
#tblTestAttributes tr:not(:first-child)
This is skipping the second tr as well. What is happening here?
Simple you can use below code
$('#tblTestAttributes tr:not(:has(th))').each(function () {
In terms of performance, using .find() will be better than resolving the selector with Sizzle.
$('#tblTestAttributes').find('tbody').find('tr').each(function () { ... });
Here's the jsPerf to show it.
use
#tblTestAttributes tr:gt(0)
or
#tblTestAttributes tbody tr
I would recommend the 2nd, because it may take advantage of querySelectorAll and should be the fastes solution.
your approach didn't work as expected, because the 2nd tr is also a first-child(of tbody)
Use tr + tr selector, which gets all tr that appear after another tr, so the first one is skipped.
Also no need to check if table exists, as in that case $.each wouldn't even get executed.
var frequencies = [];
$('#tblTestAttributes tr + tr').each(function () {
var t = $(this).find('td[id^="txtDesc"]').text() + ";" + $(this).find('[id^="ddlFreq"] option:selected').val();
alert(t);
frequencies.push(t);
});
After your edit:
Simply select only all tr inside tbody:
$('#tblTestAttributes tbody tr').each(function(){
...
}
It happens because the second row is, in fact, the first child of the tbody just like the first row is the first child of the thead.
To only take the elements you need, I'd suggest something nearer from your need :
#tblTestAttributes tr:has(td)
Don't forget to get rid of those duplicate txtDesc id, this is illegal in HTML, use a class instead.
I have two html tables:
<table id="tabA">
<tr>
<td> </td>
</tr>
<tr>
<td>
<table id="tabB">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
So, if I use $("#tabA tr").length I receive 3 instead of 2. I want to count only tabA length.
This should work:
$("#tabA > tbody > tr").length;
Use $("#tabA > tbody > tr").length. You selector returns ALL tr elements within tabA, not just its direct descendants.
Here's a reference to child selectors.
You can use direct child selector:
$("#tabA > tr").length
Or children method:
$("#tabA").children('tr').length
However browsers add tbody wrapper for tr elements and direct child selector and children method do not return a proper value, you can code:
$("#tabA > tbody > tr").length
I have a table with a couple of rows, each row with two columns, the first column will hold title and second column will have the respective values.sometimes, cells in the right may not have values, so it doesn't make sense to have just the title..with no value.. I can either hide the title on the left cell that has no value on the right or the whole row itself.
I have come up with this but its not working..
$('.EventDetail tr').each(function(){
if(!$('td:not(:empty)',this).length)
$(this).hide();
});
Here is the table. I am wondering if tag is making any difference. OR one of the has a class and the other one don't ..should that be causing it to not work?
<table cellpadding="10" class ="EventDetail">
<tr>
<td class="TableFields"><em>Who Should Enroll?:</em></td>
<td>Everyone 18 and older who would like to attend</td>
</tr>
<tr>
<td class="TableFields"><em>Handicapped Access:</em></td>
<td>Yes</td>
</tr>
<tr>
<td class="TableFields"><em>Parking Notes:</em></td>
<td></td>
</tr>
<tr>
<td class="TableFields"><em>Instructor:</em></td>
<td>John Filler</td>
</tr>
</table>
So there is no parking notes info, so I want to hide the left cell that contains the title 'Parking Notes".
I think this will work:
$('.EventDetail tr').has('td:nth-child(2):empty').hide()
You can try it on jsFiddle.
Try this:
$('.EventDetail tr').each(function(){
if ($('td:empty',this).length > 0))
$(this).hide();
});
Your selector will cause the if statement never to be true for any row in your example. $("td:not(:empty)") always selects the <td> element with the title, so length is always 1. if(!1) is never true.
You should remove the double negative (the ! and the :not) to make it clearer, and then check that the length (i.e. number of matched elements) is > 0.
You can try this:
$(document).ready(function(){
$('.EventDetail tr').each(function(){
if ( $(this).children().not('.TableFields').text().length == 0 )
$(this).hide();
});
});