JavaScript DOM动态创建表格：insertRow与insertCell用法详解

今天早睡

发布时间：2026-10-16| 7人浏览过

原创

掌握JavaScript DOM中insertRow与insertCell方法，实现动态表格的行增删与属性设置，避免IE兼容性问题。

结果或目标

在网页中通过JavaScript动态生成、修改表格结构，包括新增行、删除指定行、设置单元格内容及样式，并确保良好的浏览器兼容性。

准备条件

需要准备一个已有的HTML表格元素，并获取其引用对象（通常通过document.getElementById）。了解DOM树的基本操作逻辑。

真实操作顺序

第1步：选择推荐的表格操作方法

虽然可以使用appendChild()追加行，但在旧版Internet Explorer中可能存在兼容性问题。因此，推荐使用insertRow(index)和insertCell()组合来创建表格，这两个方法行为一致且兼容性更好。

insertRow(index)：在指定索引位置前插入新行。索引从0开始。默认调用insertRow()等同于insertRow(-1)，即追加到末尾。
insertCell()：用法同insertRow，用于在行内插入单元格。

常见用法为向表格末尾添加一行：
objTable.insertRow(objTable.rows.length)

第2步：动态插入行与单元格

要创建表格内容，首先获取目标表格对象，然后依次插入行和单元格，并设置内容。

// 获取表格对象
var objMyTable = document.getElementById("myTable");

// 在最后一行之后插入新行
var index = objMyTable.rows.length;
var nextRow = objMyTable.insertRow(index); 

// 在新行中插入三个单元格
var cell0 = nextRow.insertCell();
var cell1 = nextRow.insertCell();
var cell2 = nextRow.insertCell();

// 设置单元格内容
cell0.innerHTML = '';
cell1.innerText = '数据项';
cell2.innerHTML = '';

第3步：正确删除表格行

删除行时使用deleteRow(index)。需要注意的是，删除某一行后，表格的rows.length会立即减少，且后续行的索引会前移。如果遍历删除，需特别注意索引变化，避免遗漏或越界。

如需删除特定ID对应的行，可先获取行的rowIndex属性：

var row = document.getElementById("行的Id");
var index = row.rowIndex; 
objTable.deleteRow(index); // 根据索引删除

若要清空表格所有行（假设第一行为表头不删除），需注意循环方向或索引更新：

function removeAllRows() {
    var objTable = document.getElementById("myTable");
    // 从倒数第二行开始向前删除，或者记录长度循环
    var length = objTable.rows.length;
    for (var i = 1; i < length; i++) { 
        objTable.deleteRow(i);
        length--; // 每删除一行，总长度减1，否则可能出错
    }
}

第4步：设置表格及单元格属性

使用setAttribute(属性名, 属性值)动态设置HTML属性。

注意：在JavaScript中设置CSS类名时，不能直接使用class，因为它是保留字。应使用className：

var objMyTable = document.getElementById("myTable");
// 设置边框
objMyTable.setAttribute("border", "1"); 
// 设置CSS类（正确写法）
objMyTable.setAttribute("className", "inputbox1");

第5步：完整示例—带交互的动态表格

以下示例展示如何点击按钮动态添加行，并实现简单的隔行换色效果：

<script type="text/javascript">
var Count = false; //控制交替换行
var NO = 1; //行号计数器

function addRow() {
    var table = document.getElementById("table");
    Count = !Count; //切换颜色状态
    
    // 在最后新增一行
    var newTr = table.insertRow(table.rows.length); 
    
    // 添加两列
    var newTd0 = newTr.insertCell();
    var newTd1 = newTr.insertCell();
    var newTd2 = newTr.insertCell();
    
    // 设置背景色交替
    if (Count) {
        newTr.style.background = "#FFE1FF";
    } else {
        newTr.style.background = "#FFEFD5";
    }
    
    NO++;
    // 设置列内容和控件
    newTd0.innerHTML = '<input type=checkbox id="box' + NO + '" />';
    newTd1.innerText = "第" + NO + "行";
    newTd2.innerHTML = '<input type="text" id="Text' + NO + '" />';
}
</script>