jQuery - add new row in a table after each row

Question

Table:

<table id='t1' style='border:1px solid #000000'>
    <tr>
      <td><span id='flight_1'>1</span></td><td>1</td>
    </tr>   

    <tr>
      <td><span id='flight_2'>2</span></td><td>2</td>
    </tr>  

    <tr>
      <td><span id='flight_99'>99</span></td><td>99</td>
    </tr> 
</table>

I want to search for each 'flight_xx' id and then create a new row after the row belonging to the 'flight_xx' id.

Is this possible using jQuery?

The table is created using the DisplayTag library and I can't figure out how to do it.

Answer 1

Try:

$('span[id^="flight"]').closest('tr').after('<tr>This is a new tr</tr>');

That would add a new row after rows that contain spans having ids that start with flight.

Answer 2

Standard jQuery would look like:

var search  = 99,
    new_row = '<tr><td></td></tr>';

$('#flight_' + search).closest('tr').after(new_row);

Answer 3

You can do it like this:

$("#flight_" + flightNumber).closest('tr')
                            .after('<tr><td><New Cell!</td><td></td></tr>');

This takes the flgiht number, converts it into the flight_xx ID, finds that element, goes up to the <tr> it's in (via .closest(), and inserts the new row .after() that one.

If you had the option of adding the ID on the row instead of the <span>, do that and just remove the .closest() call.