javascript动态添加单元格的脚本代码
时间：2023-09-02 05:21:26
如何动态添加单元格!!
用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" 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>
标签：javascript,动态添加,单元格
0
投稿猜你喜欢
Python实现图像增强
2022-07-08 10:50:50
mysql数据库之索引详细介绍
2024-01-19 09:06:08
MySQL数据库表修复 MyISAM
2024-01-19 16:39:08
SQL建立数据库及删除数据库命令
2024-01-13 01:58:16
CSS实例教程：复合型CSS条状图表（上）
2010-01-23 12:43:00
Golang的继承模拟实例
2024-05-08 10:23:14
pandas 读取各种格式文件的方法
2023-12-14 22:08:59
一小时学会TensorFlow2之Fashion Mnist
2023-01-27 12:08:16
MySQL关系型数据库事务的ACID特性与实现
2024-01-21 13:15:17
python的格式化输出（format,％）实例详解
2022-03-20 04:17:57
kafka-python批量发送数据的实例
2023-04-24 04:40:23
GoLang中的timer定时器实现原理分析
2024-04-23 09:36:12
SQL Server中检查字段的值是否为数字的方法
2024-01-24 17:47:21
Python脚本实现自动登录校园网
2023-01-26 09:37:56
go语言编程之select信道处理示例详解
2024-04-26 17:16:14
python3第三方爬虫库BeautifulSoup4安装教程
2023-05-10 21:11:57
python web.py启动https端口的方式
2021-10-20 11:33:44
Python入门_浅谈数据结构的4种基本类型
2021-01-11 19:12:28
修改Oracle监听默认端口号1521的方法
2024-01-25 09:45:30
使用Python开发windows GUI程序入门实例
2023-01-18 16:54:45