Insert row after row Javascript

Question

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";
}

This is also a duplicate http://stackoverflow.com/questions/2456737/append-row-after-first-row-in-a-html-table — Funk Doc, Sep 23 '14 at 17:04
Possible duplicate of [append row after first row in a html table](https://stackoverflow.com/questions/2456737/append-row-after-first-row-in-a-html-table) — Brian Tompsett - 汤莱恩, Mar 29 '18 at 15:53

score 1 · Answer 1 · answered Sep 23 '14 at 17:05

1

Assuming your table has an id=myTable, you can use:

var table = document.getElementById("myTable");
var row = table.insertRow(1);    //inserts row at index 1, like in your example
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "data1";
cell2.innerHTML = "data2";

answered Sep 23 '14 at 17:05

cppprog

804
3
12
22

This should be the accepted answer. Very simple! – Halo Jul 21 '22 at 07:59

score 1 · Accepted Answer · answered Sep 23 '14 at 17:07

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>');
    });
});

vr_driver · Answer 3 · 2023-01-05T23:00:53.520

This will work with other examples or deleting them too.

<body>
    <table id="myTable">
        <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>        
        <tr><td>test #4</td><td><a href="#">Here we go4!</a></td></tr>        
        <tr><td>test #5</td><td><a href="#">Here we go5!</a></td></tr>
    </table>
</body>

<script>
   var table = document.getElementById("myTable");
   var row = table.insertRow(1);    //inserts row at index 1, like in your example
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   cell1.innerHTML = "data1";
   cell2.innerHTML = "data2";

// This line becomes the 4th line after the insert.
// But it has the row value of 3, because row 1 is 0
// <tr><td>test #3</td><td><a href="#">Here we go3!</a></td></tr>   

   var row = table.deleteRow(3);    //inserts row at index 1, like in the example
</script>

https://jsfiddle.net/vr_driver/zjaoqbyh/7/

Insert row after row Javascript

3 Answers3