I am trying to find all tr elements inside a table element. The table element it self has other table elements nested inside its rows. So when I do the following:
$(tbl).find('tr').hover(...);
...it picks up tr elements inside the nested table elements also. I just want the immediate tr elements of the table element I am trying to query.
$(tbl).find('>tr').hover(...); didn't work for me!
ps: tbl is a table element, not a string
Read full answer, please.
$(tbl).children()
will give you tbody and also thead if it exists.
So if you want immediate tr, you will need to try this.
$(tbl).children('tbody').children('tr')
Don't forget to considertbody while fetching children of a table, as in Firefox a direct call to children like $(tbl).children() returns tbody and not tr, even if its not in your markup. Complex but useful.
Happy Coding.
$(tbl).children('tr').hover(...);
This should work:
$(tbl).children('tr').hover(...);
Form the JQuery docu:
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.
Don't forget that - even if your markup doesn't include them - from a DOM point of view, tr elements are nested inside a tbody element, so you will need to include this in the selector.
Try something like...
$(tbl).find('tbody>tr').hover(...);
Although this will probably find the nested table's tbody too, so you'll probably need something like...
$(tbl).children().find('tr').hover(...);
Related
I'm attempting to target the last parent table row within a table that has children table-row elements inside of it. I've tried the below jQuery to target the :last pseudo, however, like expected, it is targeting the absolute last table-row element within the targets parent table.
$('table[id*="dgRegistrantList"]').find('tr:last').addClass('EventRegLastAttendee')
I've put together a jsFiddle with the HTML block I'm attempting to target with the jQuery, I hope it is helpful!
http://jsfiddle.net/jodriscoll/LZA7e/
The Green table-row is the one I would like to target, however, the one highlighted in Red is the obvious one receiving the class.
This system can generate a variant of table rows depending on the users selection prior to this "Step". For a full example of what I'm working with, visit: http://secure.massgeneral.org/event-form (I'm working with Step 2).
Please be aware that the HTML I'm working with is produced by a CMS software that I as the customer, do not have access to changing. Hence the purpose of this jQuery exercise.
If all the parent <tr> elements have the classes BBListOddRowStyle or BBListEvenRowStyle you can do this:
$('table[id*="dgRegistrantList"]').find('tr[class*=RowStyle]:last')
.addClass('EventRegLastAttendee')
DEMO
If not, you can use .children() twice to make sure you target the right ones:
$('table[id*="dgRegistrantList"]').children('tbody')
.children('tr:last').addClass('EventRegLastAttendee')
DEMO
Use this code to target the last row:
$('table[id*="dgRegistrantList"]').find('tr[class^=BBList][class$=RowStyle]:last').addClass('EventRegLastAttendee')
Explanation:
tr //it will look for tr
[class^=BBList] //which class starts with BBList
[class$=RowStyle] //and ends with RowStyle (so we're leaving Odd and Even inside and not recognized)
:last //the last of those element, if you remove it you select all of them
Is .children() what you're looking to do?
$('table[id*="dgRegistrantList"]').children('tr:last').addClass('EventRegLastAttendee');
.children() only goes down one dom level, while .find() will go down as far as it can.
Don't use find. It will look at any depth and it may match unintended subtables. Perhaps it will work for your example, but you don't want to be acquiring a bad habit. Plus, find will be more costly than a targeted approach.
You want a more targeted approach:
var targetTd = $('table[id*="dgRegistrantList"]').children('tbody').children('tr:last').find('table:first').children('tbody').children('td:last');
use this code to target parent tr last row
$('table[id*="dgRegistrantList"]').find('tr[class^=BBList]:last').addClass('EventRegLastAttendee');
I created a 3x3 table. Each column is generated using a function. The function basically returns a "td" element. Else where in the code I trigger an event based on some conditions. Whenever the event is triggered, I want to update one particular cell of the table. None of the cells have ids attached to them.
My question is how can I link up the "td" that I want to be updated with the event?
I have no specific context that refers to this td alone.
If you're not using any other tools like jQuery my approach might be to find the table which I assume you can do with Javascript. Then for each td element in the table inject a class to them that is unique. You could just give them numbers or something easy. Assuming the numbering never changes you now have an easy way to lookup the td elements later in your code without having to keep a reference to the td element you want.
Instead of adding a class you could just get all the td elements in the table and if you knew the 4th element was always the cell you wanted then you could just keep a reference to that td element.
Without using jQuery or anything, you can use DOM selectors such as .childNodes (and iterating till you're satisfied), .lastChild, .firstChild, .parentNode etc.
This link gets you through some examples.
Although, if you are using this a lot, create ID dynamically in JS. Like iterating once through all your table (with .childNodes), assigning an ID (like row1-col2) to every td. It will simplify the rest of your code.
Here is a jsFiddle to show you how with jQuery:
http://jsfiddle.net/HzBFE/
How can I add rows <tr> in to a table a any level(Top/Bottom/In between) using Javascript/jQuery ?
$(html).insertBefore($('table tr').eq(index));
Will insert some html before the tr with index specified.
A small demo
to append to the bottom:
you have nothing to do, because you just have to find the parent element and then append it.
to append to the top:
well, it is more complicated, but I think is possible. One way is following:
find the parent element from the rows and read all rows into an extra variable. Fortunatly the result will be an array of object. Then create a new row element and use the method unshift() to put this at the begin of the array. Clean table's body and then add each element to body again.
http://api.jquery.com/prepend/
I have a div with id testdiv. Inside the div i have a table with no id or class . I would like to set the style attribute of all table tr and td elements inside the div to none.
How can this be done using jquery code. Some example code would be really appreciated
Please Help.
Thank You
You can use .removeAttr(), like this:
$("#testdiv").find("table, tr, td").removeAttr("style");
Note though this just removes inline styles, whatever's defined in your stylesheets will still apply.
From a more general standpoint, an ID is never needed to select an element, you can just use an element selector like I have in the .find() call above, so for example this code looks for all <table>, <tr>, and <td> elements that are descendants of that <div id="testdiv">.
I am importing a feed into Tumblr and because of the formatting of the site, it shows too many pictures. So to fix that, I thought I would use jquery to remove extra elements.
It turns out that the imported feed uses tables. No worries, I made a jquery call that seemed to work fine on an individual post.
(Pardon the ugly match)
$('.copy div table tbody tr td div table tbody tr td:gt(3)').remove();
This works swimmingly on http://apt.jauderho.com/post/127696762/aaman-lamba-hibiscus
However, going to a page with more than one post, it looks like the second post is being treated as part of the first and hence all the pictures are removed due to the gt(3). My understanding was that using the fragment above, I would be able to iterate on each post leaving only 4 images max per post. See http://apt.jauderho.com/
Can anyone tell me what I'm missing? Thanks.
Try this:
$('.copy div table tbody tr td div table tbody tr').find('td:gt(3)').remove();
The difference from the original is that the find() is executed for every tr that is matched by the first selector. It will remove every td after the 4th td in every matched tr.