Appending to <td> instead of below <tr>. What's wrong?

In this jsFi开发者_开发问答ddle

http://jsfiddle.net/littlesandra88/tZqYX/

would I like that a new <tr> is inserted below the one where "Details" is clicked.

I do

$('.row').append("<tr><td>It worked</td></tr>");

but this results in

<tr class="row">
  <td class="edit-column"><a href="javascript:addRemove('7249');">Details</a> <input value="Save" type="submit"></td>
<tr><td>It worked</td></tr></tr>

where I was hoping for

<tr class="row">
  <td class="edit-column"><a href="javascript:addRemove('7249');">Details</a> <input value="Save" type="submit"></td>
</tr>
<tr><td>It worked</td></tr>

Any idea how to fix this?

Try $('.row').after("<tr><td>It worked</td></tr>");

.append. is appending the row to the .row row. Using .after will put the row AFTER the .row row

Try .after() instead of .append()

$('.row').after("<tr><td>It worked</td></tr>");

You are basically trying to add to an existing row. You need to add the new row to the table. Or try something like the next $row after it.

Try .after() instead. .append() is for sticking something INSIDE the specified element at the end of the child list

$(<tr><td>It worked</td></tr>").insertAfter($('.row'));

You need to append the new row to the tbody element, not to the row itself

You are basically trying to add to an existing row. You need to add the new row to the table. Or try something like the next $row after it.

$('#accTable').append("<tr><td>It worked</td></tr>");

The .after() is probably what you're looking for. It will append the text after the row element.