html - Insert row after row Javascript

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>

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

Share Improve this question edited Mar 29, 2018 at 15:52 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Sep 23, 2014 at 16:56 Marty Miles 131 gold badge1 silver badge3 bronze badges

This is also a duplicate stackoverflow./questions/2456737/… – Funk Doc Commented Sep 23, 2014 at 17:04
Possible duplicate of append row after first row in a html table – Brian Tompsett - 汤莱恩 Commented Mar 29, 2018 at 15:53

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

If I understand you need to do that, right ?

http://jsfiddle/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>');
    });
});

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

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 bees 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/vr_driver/zjaoqbyh/7/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Insert row after row Javascript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)