inserting row in the middle of a html table using javascript

Question

I have a table which contains two rows.

<tr id="row1"><td>first row</td></tr>
<tr id="row2"><td>second row</td></tr>

I need to insert few rows between row1 and row2 using java script. I can achieve this by using java script create element. But I wish to add new rows using string html content. for example :

"<tr><td>This row is placed between first and second</td></tr>".insertAfter(first row Id);

is there way like this to add rows in between?

I always recommend not using jQuery, when you can. See below for a completely native JS solution. — ndugger
– ndugger, Commented Apr 28, 2014 at 13:17
@NickDugger Given that jQuery is JS, couldn't one argue that anything that can be done in jQuery can be done in native JS? — Patrick Q
– Patrick Q, Commented Apr 28, 2014 at 13:31
It doesn't make sense to use jQuery unless it is required.It adds a bloat of 19 kB and if you can do the same using plain js and are not using it specifically for doing something, you should not add it. — Ashutosh
– Ashutosh, Commented Apr 28, 2014 at 13:42

ndugger · Accepted Answer · 2014-05-29 15:26:14Z

8

var newRow = document.createElement("tr");
newRow.innerHTML = "<td>This row is placed... etc.</td>";

var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2);

Read up on it here: https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore

edited May 29, 2014 at 15:26

answered Apr 28, 2014 at 13:16

ndugger

7,5815 gold badges35 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

schnawel007 · Accepted Answer · 2014-04-28 13:15:56Z

3

Use jQuery. There is a Function insertAfter();

$("#row1").insertAfter("your html");

http://jquery.com/

answered Apr 28, 2014 at 13:15

schnawel007

4,0183 gold badges23 silver badges27 bronze badges

1 Comment

ndugger Over a year ago

Suggesting to simply "use jQuery" is neither helpful nor productive. Always use native JS when you can.

Deepan Raj · Accepted Answer · 2015-08-26 10:24:22Z

var button = document.getElementById('insert');

var table = document.getElementById('table');

button.onclick = function() {

var position=Math.round(table.rows.length / 2);

var row = table.insertRow(position);

row.innerHTML = '<td>This row is placed between '+position+' and '+(parseInt(position)+1)+'</td>';
} 

 **after that if u can use like that u can increment ur row id also:**


 var rowId = '#' + tableId + ' tr';
    var k = 0;
    $(rowId).each(function () {
        var ObjInput = $(this).find('input[type=text],input[type=radio],input[type=checkbox],textarea,select,input[type=img],input[type=hidden],input[type=button],img');
        if (ObjInput != null) {
            for (var j = 0; j < ObjInput.length; j++) {
                var inputId = $(ObjInput[j]).attr('id');
                inputId = inputId.replace(/_[0-9]{1,2}/g, '_' + k);
                $(ObjInput[j]).attr('id', inputId);
                $(ObjInput[j]).attr('name', inputId);
            }
            k++;
        }
    });

Collectives™ on Stack Overflow

inserting row in the middle of a html table using javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related