CODEWITHSUNDEEP
jqueryhtml
Répás
Répás

Reputation: 1820

Jquery add table row after the row which calling the jquery

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 JavaScript.

<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 working fine, it makes a tr after the table's last tr and puts 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 is calling the script. How can I do this?

Upvotes: 23

Views: 62864

Answers (3)

AbdusSalam
AbdusSalam

Reputation: 440

interst tr id then onclick="xyz()"

something like this:

<tr id=""  onclick="xyz()"><td></td><td></td></tr>
<script>
    function xyz()
    {
    var newrow = "<tr><td>data1</td><td>data1</td></tr>";        
    $("#tr_id").after(newrow);
    }
</script>

Upvotes: 1

Dontlose
Dontlose

Reputation: 49

try .prepend() instead of .append()

Upvotes: 3

Geoff
Geoff

Reputation: 3129

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.

Upvotes: 43

Related Questions