Jquery add table row after the row which calling the jquery.

Question

Hello!

I've got a table.

<table id="servers" ...>
...
{section name=i loop=$ownsites}
<tr id="site_id_{$ownsites[i].id}">
...
<td>{$ownsites[i].phone}</td>
<td class="icon"><a id="{$ownsites[i].id}" onClick="return makedeleterow(this.getAttribute('id'));" ...></a></td>
</tr>       
{/section}
<tbody>
</table>

And this java script.

<script type="text/javascript">
function makedeleterow(id)
    {
        $('#delete').remove();
        $('#servers').append($(document.createElement("tr")).attr({id: "delete"}));
        $('#delete').append($(document.createElement("td")).attr({colspan: "9", id: "deleter"}));
        $('#deleter').text('Biztosan törölni szeretnéd ezt a weblapod?');
        $('#deleter').append($(document.createElement("input")).attr({type: "submit", id: id, onClick: "return truedeleterow(this.getAttribute('id'))"}));
        $('#deleter').append($(document.createElement("input")).attr({type: "hidden", name: "website_del", value: id}));
    }
</script>

It's workin fine, it makes a tr after the table's last tr and put the info to it, and the delete function also works fine.

But i'd like to make this append AFTER the tr (with td class="icon") which calling the script. How can i do this?

Answer 1

You can use the .after() function in jQuery to append some content after another element.

So instead of

$("servers").append( ... );

you would use

$("#" + id + ).closest( "tr" ).after( ... );

or you could also use

$( ... ).insertAfter( $("#" + id ).closest( "tr" ) );

which is essentially equivalent.

See http://api.jquery.com/after/ for full details.