Question

I’m trying to build a jQuery plugin to lock rows or columns in a table a la Excel’s freeze panes. (There are a number of other fine solutions for this, but none of them have worked for me for various reasons. I think it might have something to do with the table being inside a modal popup. But I digress.)

As part of this I’m trying to select the first n rows or columns of a particular table, specified in the plugin options. The trouble is that some of the rows contain other nested tables. I unfortunately can’t do anything about this. So my question is, how do I get only the first level of <tr>s within a table? Using .children('tr') isn’t always working because the row isn’t necessarily the direct child of the table–there might be a <thead> or (ideally) the user might be able to call the plugin on a containing element and it should be smart enough to find the table(s) inside it.
Edit: Actually, now I’m thinking that second bit is not going to work if we have to select the table by id. But I don’t think it’s too much to ask that people use the plugin only on a table, since that’s kind of what it’s for…

In short: how do I select only the first level of table rows that may or may not be the direct child of a particular containing element?

What I came up with so far, based on the second half of this answer, was this:

$el.find('tr:not(tr tr):lt('+base.options.rows+')')

and for the columns:

$el.find('tr:not(tr tr)').find('(td,th):lt('+base.options.columns+')')

But that seems horribly long and clunky and I’m wondering if there’s a shorter/cleaner way of doing it. Or is there a way just using plain old javascript?

Edit 2: Apparently the selector version is actually faster than .not(). News to me.

Answer 1

Give your table an “ID” so you have a starting point and use the direct child selector

$('tableID, tableID > tbody,tableID > thead, tableID > tfoot').children('tr')

As tr can be under the table, tbody, or thead for that specific table