CODEWITHSUNDEEP
jqueryjquery-selectors
benhowdle89
benhowdle89

Reputation: 37494

Use jQuery to target the bottom TD in a table column

Ok, so this is the table markup:

    -------------------------------
    heading1 | heading2 | heading3|
    -------------------------------
    <TABLE CONTENT>
    -----------------------------
    column1 | column2 | column3 |
    -----------------------------

Not great i know but the principle is this: i need to target column1, column2 and column3.

So i can use jQuery to do this: set heading1 as column1's HTML and set heading2 as column2's HTML etc...

But i'm not sure how to relate heading1 to column1 etc...

Thanks

Upvotes: 1

Views: 247

Answers (2)

RReverser
RReverser

Reputation: 2035

To do what you want:

$headings = $('#myTable tr:first th');
$('#myTable tr:last th').each(function(i) { $(this).html($headings.eq(i).html()) });

But, actually, for copying header you may simply append it to the bottom of table:

$('#myTable').append($('#myTable tr:first').clone());

The only thing I can add - it would be better to use thead and tfoot for header/footer of table, in this case you will have more comfortable for reading code and easier and faster header/footer row selection.

Upvotes: 1

Nishchay Sharma
Nishchay Sharma

Reputation: 1324

If the number of headings and columns are same, then u may use this: Assuming headings to be copied are assigned class='source' and target rows (of course first row of column) as class='target'=>

var dummy=Array(), ctr=0;
dummy=$('.target');
$('.source').each(function()
{
$(dummy[ctr++]).html($(this).html());
}

Upvotes: 4

Related Questions