Dynamically insert new rows in the table

Question

<script type="text/javascript" language="javascript">
 function addNewRow()
 {
    var table = document.getElementById("table1");
    var tr = table.insertRow();
    var td = tr.insertCell();
    td.innerHTML= "a";

    td = tr.insertCell();
    td.innerHTML= "b";
    
    td = tr.insertCell();
    td.innerHTML= "c";
    
    td = tr.insertCell();
    td.innerHTML= "d";
    
    td = tr.insertCell();
    td.innerHTML= "e";
 }
</script>
<body>
    <table id="table1" border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr id="row1">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
    <input type="button" onClick="addNewRow()" value="Add New"/>
</body>

This example is for dynamically insert new row and cells in the table. But its behavior is different in all browsers.

Internet Explorer = It add row in the last and new added cells are starts from first.
Chrome/Safari = It add new row in the first and new added cells are starts from end.
Mozilla Firefox = It is not working.

I want new added row in the last and new added cells starts from first like (Internet Explorer) in all browsers.

If you have any solution for same behavior please tell me.

So far, Stonedecroze's answer is most correct. You could spend weeks trying to get this to work on 3 or 4 browsers. Or you could follow the hyperlink and have a jQuery version running in a few minutes -- with much better assurance that it will work on as many browsers as possible. — Brock Adams
– Brock Adams, Commented Jun 16, 2010 at 8:20
You might find this useful: [stackoverflow.com/questions/171027/add-table-row-in-jquery][1] [1]: stackoverflow.com/questions/171027/add-table-row-in-jquery — Silver Gonzales
– Silver Gonzales, Commented Jul 24, 2012 at 18:17

Adam Lukaszczyk · Accepted Answer · 2010-06-16 07:19:39Z

3

try to use:

var tr = table.insertRow(-1);

like its said here:

https://developer.mozilla.org/en/DOM/table.insertRow

answered Jun 16, 2010 at 7:19

Adam Lukaszczyk

4,8863 gold badges24 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Dynamically insert new rows in the table

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related