jQuery - Getting Rows from a Table

Question

Hey all,

The title on this one may be a bit misleading as it's not as simple as it sounds. I've got a page with two tables (each has 50 rows) shown side-by-side so that the rows align with one another. The problem I'm facing is that the default height for a row in each table is the same but occaisionally dynamic content in the second table causes a specific row to be taller than the others.

"Not a problem!", I said to myself. "I'll just get the height of the row in the second table when the page loads and then set the height of the same row in the first table to match it!" Therein lies my problem. I can't seem to get the numbers of rows in each table to match up progamatically. Without that, I'm not sure how to change the height of the correct row in the first table. I think it may be due to the content of the cells in the second table. Many of the cells actually contain their own tables (and table rows) and so my jQuery selector is getting all the rows, not just the parent ones.

Here's a quick sample of the markup I'm being forced to work with:

<div id="mainTable">
  <div id="randomServerGeneratedNumbers" rel="MainTable">
    <htmldb:randomNumbers>
      <table id="moreRandomNumbers">
        <tbody>
          <tr></tr> <!--THESE ARE THE ROWS I WANT!!!!-->
          <tr>
            <td>
              <table>
                <tr></tr> <!--IGNORE THESE!!!-->
              </table>
            </td>
          </tr>
          <tr></tr>
        </tbody>
        <tfoot></tfoot>
      </table>
    </htmldb>
  </div>
</div>

And here's my jQuery selector that almost working:

$('#mainTable').find('div[rel=mainTable] tbody tr:gt(0)');

Answer 1

You want to use the child selector: A > B. The following jQuery code will select all the immediate child rows of the <tbody /> element within the first table found within <div rel="MainTable" />:

$('div[rel=MainTable] table:first > tbody > tr')

See the jQuery documentation for more.

Answer 2

I'd give the parent table rows a specific class. And then you can access them by the class name:

<div id="mainTable">
<div id="randomServerGeneratedNumbers" rel="MainTable">
<htmldb:randomNumbers>
  <table id="moreRandomNumbers">
    <tbody>
      <tr class="row"></tr> <!--THESE ARE THE ROWS I WANT!!!!-->
      <tr class="row">
        <td>
          <table>
            <tr></tr> <!--IGNORE THESE!!!-->
          </table>
        </td>
      </tr>
      <tr class="row"></tr>
     </tbody>
     <tfoot></tfoot>
     </table>
     </htmldb>
  </div>

and select like:

$('table#moreRandomNumbers .row');