dynamically insert new rows in the table (JavaScript) ?

Posted by Karandeep Singh on Stack Overflow See other posts from Stack Overflow or by Karandeep Singh
Published on 2010-06-16T07:14:56Z Indexed on 2010/06/16 7:22 UTC
Read the original article Hit count: 173

Filed under:
|
|
|
|
<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.

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

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

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about table