CODEWITHSUNDEEP
jqueryhtml
Phil
Phil

Reputation: 887

How to work with specific column without iterating each row with jQuery

I have found answers to add a column with jQuery in specific locations, using a syntax like this:

    $('table').find('tr').each(function(){
        $(this).find('td').eq(0).after('<td>cell 1a</td>');
    });

But what I would like to do is insert a column for the first and last row, without iterating through eac row:

$('table').find('tr').eq(0).magic(function() {
     $(this).find('td:last').after('<td>foo</td>');
});

How can I do this, and replace magic with something jQuery does?

Using $('table').find('tr').eq(0).find("td:last").after('<td>foo</td>'); works fine to edit a specific row. So it looks like the issue is somewhere else in my code.

Upvotes: 0

Views: 48

Answers (2)

Pete
Pete

Reputation: 133

You can use append and it will add the td at the end of the selector

$('table').find('tr').each(function(){
    $(this).append('<td>and a </td>');
});

Here's a jsfiddle

Upvotes: 0

jfriend00
jfriend00

Reputation: 707288

Something has to iterate over every row to add a column as that's just how tables work. You can use a little more selector power and do something like this:

$('table tr').find("td:last").after('<td>foo</td>');

Working demo: http://jsfiddle.net/jfriend00/3zfwrg8p/

Or, using .append() (since you're adding at the end of the row):

$('table tr').append('<td>foo</td>');

Working demo: http://jsfiddle.net/jfriend00/osbn218w/

Upvotes: 1

Related Questions