在表中动态插入新行

时间:2010-06-16 07:14:57

标签: javascript insert html-table row cells

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

此示例用于在表中动态插入新行和单元格。 但它的行为在所有浏览器中都有所不同。

  1. Internet Explorer =它在最后添加行,新添加的单元格从第一个开始。
  2. Chrome / Safari =它在第一个添加新行,新添加的单元格从头开始。
  3. Mozilla Firefox =无效。

    我想在最后添加新行,并且在所有浏览器中从第一个开始添加新的单元格(Internet Explorer)。

  4. 如果您有任何相同行为的解决方案,请告诉我。

1 个答案:

答案 0 :(得分:3)

尝试使用:

var tr = table.insertRow(-1);
像它在这里说的那样:

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