I'm not so good at Javascript and can't get one thing working. I have a table, something like this:
<table>
<tr><td>test #1</td><td><a href="#">Here we go1!</a></td></tr>
<tr><td>test #2</td><td><a href="#">Here we go2!</a></td></tr>
<tr><td>test #3</td><td><a href="#">Here we go3!</a></td></tr>
</table>
And I need to insert new row with some content (not clone) after row with pressed link.
So in other words, after pressing on <a>
in first row, the table have to be like this:
<table>
<tr><td>test #1</td><td><a href="#">Here we go1!</a></td></tr>
<tr><td>some content here</td><td><a href="#">some content here</a></td></tr>
<tr><td>test #2</td><td><a href="#">Here we go2!</a></td></tr>
<tr><td>test #3</td><td><a href="#">Here we go3!</a></td></tr>
</table>
I really tried to do something but it was always inserting before of after table.
UPDATE:
My JS code to insert new row looks something like this: (I tried to use one solution posted here but it doesn't work).
function RowAdd()
{
var table=document.getElementById("test");
var last=$(this).closest("tr").prevAll().length;
var row=table.insertRow(last);
row.insertCell(0);
row.cells[0].innerHTML="test";
row.insertCell(1);
row.cells[1].innerHTML="test";
row.insertCell(2);
row.cells[2].innerHTML="test";
}
If I understand you need to do that, right ?
http://jsfiddle.net/OxyDesign/v7swo505/
JS (with jQuery)
$(document).ready(function(){
$('body').on('click','table a', function(e){
$(this).closest('tr').after('<tr><td>New Content 1</td><td><a href="#">New Content 2</a></td></tr>');
});
});