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
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');
});
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.
I need to assign/set a unique ID to child tables per Javascript. The main parent table has an ID but the child tables and further child tables within child tables don't.
How can I set an ID to the 1st child and second child tables "on page load"?
<table id="main parent table">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
You are probably looking to do something like this (fiddle here) :
$('table').each(function(eq, el) {
el = $(el);
if(typeof(el.attr('id')) === "undefined") {
el.attr('id', 'table-' + eq);
}
});
You check every table on site and if it has no id, you assign id of "table-" to each one in the tree.
Use Jquery loop on Top table children loop on inner table. find and addClass on them.
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 question already has answers here:
How to iterate a table rows with JQuery and access some cell values?
(3 answers)
Closed 3 years ago.
I am having something like:
<table id="tblOne">
<tbody>
<tr>
<td>
<table id="tblTwo">
<tbody>
<tr>
<td>
Items
</td>
</tr>
<tr>
<td>
Prod
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
</tbody>
</table>
I have written jQuery to loop through each tr like:
$('#tblOne tr').each(function() {...code...});
But problem is that it loops through the "tr" of "tblTwo" also which I don't want.
Can anyone please suggest something to solve this?
In jQuery just use:
$('#tblOne > tbody > tr').each(function() {...code...});
Using the children selector (>) you will walk over all the children (and not all descendents), example with three rows:
$('table > tbody > tr').each(function(index, tr) {
console.log(index);
console.log(tr);
});
Result:
0
<tr>
1
<tr>
2
<tr>
In VanillaJS you can use document.querySelectorAll() and walk over the rows using forEach()
[].forEach.call(document.querySelectorAll('#tblOne > tbody > tr'), function(index, tr) {
/* console.log(index); */
/* console.log(tr); */
});
Just a recommendation:
I'd recommend using the DOM table implementation, it's very straight forward and easy to use, you really don't need jQuery for this task.
var table = document.getElementById('tblOne');
var rowLength = table.rows.length;
for(var i=0; i<rowLength; i+=1){
var row = table.rows[i];
//your code goes here, looping over every row.
//cells are accessed as easy
var cellLength = row.cells.length;
for(var y=0; y<cellLength; y+=1){
var cell = row.cells[y];
//do something with every cell here
}
}
Use immediate children selector >:
$('#tblOne > tbody > tr')
Description: Selects all direct child elements specified by "child" of
elements specified by "parent".