通过innerHTML动态添加表格行
来源:互联网 发布:linux退出并保存 编辑:程序博客网 时间:2024/05/17 04:15
表格部分代码如下:
<table id="testTbl" border=1> <tr id="tr1"> <td width=6%><input type=checkbox id="box1"></td> <td id="b">第一行</td> </tr> <tr id="tr2"> <td width=6%><input type=checkbox id="box2"></td> <td id="b">第二行</td> </tr> <tr bgcolor=#0000FF> <td width=6%><input type=checkbox id="box3"></td> <td>第三行</td> </tr> </table>
动态添加表行的javascript函数如下:
function addRow(){ //添加一行 var newTr = testTbl.insertRow(); //添加两列 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell(); //设置列内容和属性 newTd0.innerHTML = '<input type=checkbox id="box4">'; newTd2.innerText= '新加行'; }
就这么简单,做点详细的说明:
1、inserRow()和insertCell()函数
insertRow()函数可以带参数,形式如下:
insertRow(index)
这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。
insertCell()和insertRow的用法相同。
2、动态设置属性和事件
上面行数中的innerHTML和innerText都是列的属性。
这个inner,就是“inner”到<tb></tb>之间,innerText是添加到<tb></tb>之间的文本,innerHTML是添加到<tb></tb>之间的HTML代码(这个so简单,这个解释挺多余的)
设置其他属性也是用同样的方式,比如,设置行背景色
newTr.bgColor = 'red';
设置事件也一样,需要简单说明一点。
比如,我要让点击新加行的时候执行一个自己定义的函数 newClick,newClick行数如下:
function newClick(){
alert("这是新添加的行");
}
对onclick事件设置这个函数的代码如下:
newTr.onclick = newClick;
这里需要主义的是,=后面的部分必须是函数名,而且不能带引号,
newTr.onclick = newClick();
newTr.onclick = 'newClick';
newTr.onclick = "newClick";
上面的写法都是错误的。
为什么,其实知道为什么没有什么意思,知道怎么用就OK了,如果不想知道,可以跳过下面这一段。
实际上这个=后面的newClick是指向自己定义的newClick函数的指针,javascript里面函数名就是指向函数的指针,加了引号括号什么的浏览器就找不到那个函数了。
下面的写法,也是正确的
newTr.onclick = function newClick(){
alert("这是新添加的行");
}
这个使用函数名实际上是一样的
设置其他的事件用法相同。
- 通过innerHTML动态添加表格行
- 通过javascript实现动态添加删除表格的行
- 动态添加表格行
- 动态添加表格行
- 动态添加表格行
- javascript动态添加表格,通过checkbox动态删除表格
- jquery动态表格,动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript动态添加表格行
- javascript 动态添加表格行
- 动态为表格添加行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- - -#,粗心得让我郁闷......
- 单片机数字时钟
- cheat engine入门教程
- 对于firefox开发中读写文件中文字符乱码的解决
- 文件同步工具rsync配置管理
- 通过innerHTML动态添加表格行
- 在urllib2中输出调试信息
- 转的: 健康程序员:五分钟与鼠标手说再见
- C语言学习中的错误信息
- Excel 2007 常用技巧
- 计算机网络攻击实验之-DDOS攻击
- 如果浏览器是女人……
- (转)SqlHelper 使用中需要注意的一点(带输出、返回参数的存储过程)
- 设计模式学习