如何動態添加儲存格!!
複製代碼 代碼如下:
用insertRow()和insertCell()方法
其用法如下:
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> <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> </head> <body> <table width="399" border=0 cellspacing="1" id="testTbl" > <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需重新整理才能執行]
