本文介绍如何使用JavaScript的insertRow和insertCell方法动态向HTML表格添加行和单元格。通过示例代码演示了如何创建新行、插入指定列数的单元格，并设置单元格的背景颜色、内容以及复选框控件。
JavaScript动态添加表格单元格与行的实现方法
探讨如何在网页中动态添加表格单元格。
具体实现代码如下：
主要依赖insertRow()和insertCell()这两个DOM操作方法。具体使用方式如下：
insertRow()方法
代码示例如下：
var newTR=TableOBJ.insertRow(N);代码说明如下：
参数N代表将新行插入到表格的第几行。
说明：当N等于0时，新行插入到表格的最上方；当N等于-1时，新行插入到表格的最后一行，此时该参数可省略。
insertCell()方法代码示例如下：
var newTD=TrOBJ.insertCell(N);其中N表示将新单元格插入到该行的第几列。
说明：当N等于0时，单元格插入到该行的最左侧；当N等于-1时，单元格插入到该行的最右侧，此时该参数可省略。
以下是一个完整的实例代码：
代码示例如下：
<script language="JavaScript">
var Count=false,NO=1;
function addRow(){
Count=!Count;
//添加一行
var newTr = testTbl.insertRow();
//添加三列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//设置列内容和属性
if(Count){newTr.style.background="#FFE1FF";}
else {newTr.style.background="#FFEFD5";}
newTd0.innerHTML = '<input type=checkbox id="box4">';
NO++
newTd1.innerText="第"+ NO+"行";
}
</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>蓝光-BlueShine</title> </head> <body> <table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" > <tr bgcolor="#FFEFD5"> <td width=6%><input type=checkbox id="box1"></td> <td >第1行</td> <td > </td> </tr> </table> <label> <input type="button" value="插入行" onclick="addRow()" /> </label> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]