Jquery getting the html from specific classs within a table

Question

I have a table and I wish to extract the html from a specific row without a specific class.

So for example with the row.

<tr>
<th class='a'></th>
<th class='b'></th>
<th class='c'></th>
<tr>

I would hope to get a result like

<th class='b'></th>
<th class='c'></th>

I've attempted a few variants of

var newTr = $('#table01 tr:nth-child(2) .a').remove().html();

But it's not returning the desired result and it's removing the th's from the original rows(as expected I guess)

Would it be best to use a regex to strip the content out or is there a jQuery selector I can use?

Answer 1

Take a look at .index()'s manual

Answer 2

var ths = $('#table01 tr:nth-child(2) th').not('.a').clone().html();

Maybe something like that. It's hard to answer on an iPod touch.

Answer 3

If you're wanting the HTML of the row, you need to point jQuery to the <tr> for .html() while .remove() would still need it to point to the <th>.

However, after .remove(), you won't be able to simply traverse from <th> to <tr> as they won't be related (e.g., via .parent()). To get around this, you can use a series of .find() and .end() to point to the <th> just long enough for .remove:

$('#table01 tr:nth-child(2)').
    find('.a').remove().end().
    html();

• jQuery begins with the <tr> w/ :nth-child(2)
• .find() will move to the <th class="a">, which you .remove()
• .end() will return to the <tr>, to grab the remaining .html()

Also, if you don't actually want to affect the table -- just the result -- toss in a .clone():

$('#table01 tr:nth-child(2)').clone().
    find('.a').remove().end().
    html();