js插入行、列[insertRow()、insertCell()]

最新推荐文章于 2024-09-24 13:56:15 发布

转载最新推荐文章于 2024-09-24 13:56:15 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wang1537/archive/2013/05/06/3063530.html

文章标签：

#javascript #ViewUI

本文介绍了如何使用tableObj.insertRow(index)和tablerowObj.insertCell(index)方法在指定位置插入新行和新单元格，提供了代码示例并展示了注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测试1

tableObj.insertRow(index)，在表格指定位置插入一个新行元素()，新行被插在index所在行之前。该方法的返回值是插入的新行。

如果一个表格有3行，index=0时插入第一行，index=3时插入最后一行，如图：
(图_1)
若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

测试2

与此类似的还有tablerowObj.insertCell(index)方法，是在表格的某行插入一个新的单元格元素()
需要注意的是，如果是往insertRow()新增的一个行元素里插入新td元素时，必须先插入第0个td(一次插入td)，否则会报错.

View Code

<html>
<head>
    <script type="text/javascript" >
        function ins(){
            var tableObj = document.getElementById("table1");
            var trObj = tableObj.insertRow(0);
            //trObj是一个新增的行，如果不新增第0个td直接新增第1个会报错
            var tdObj1 = trObj.insertCell(0);
            tdObj1.innerHTML = "0";

            var tdObj2 = trObj.insertCell(1);
            tdObj2.innerHTML = "00";

            var tdObj3 = trObj.insertCell(2);
            tdObj3.innerHTML = "000";//比原表格中的列多了，表格混乱

        }
    </script>
</head>
<body>
    <table border="1" id="table1" style="width:200px;">
        <tr id="tr1">
            <td>1</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td></td>
        </tr>
    </table>
    <input type="button" onclick="ins()" value="ins"/>
</body>
</html>