介绍如何使用javascript动态添加表格行,并对其中的方法做详细的说明
动态添加表格行
文/Ray
表格部分代码如下:
<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 newTd
1
= 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("
这是新添加的行
");
}
这个使用函数名实际上
是一样的
设置其他的事件用法相同。
转载出处:http://www.cnblogs.com/rhodamine/archive/2006/07/18/453430.html
分享到:
相关推荐
javascript动态添加表格数据行 在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方。比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种...
NULL 博文链接:https://long316.iteye.com/blog/1393895
在客户端使用JavaScript动态添加表格行,先到网上找了相关的资料,发现有现成做好的组件,发现它只能够满足比较简单的要求。
NULL 博文链接:https://long316.iteye.com/blog/1393886
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
解决了要动态生成表格行的问题,效果很好。我的项目中就用到了这个效果。
NULL 博文链接:https://1148130696.iteye.com/blog/1726191
JS自动添加,删除表格总结,及window窗体居中。内含源代码!!!!
javascript实现动态的添加表格功能
用JavaScript制作的动态表格,有添加、删除、全选、全不选,有对动态新增的域校验问题,有对新增的域设置readonly问题,还有对新增域中的span进行隐藏问题都有解决,还有对动态表格的讲解PPT一份。
然后获取了表格元素及其 tbody 元素,通过 for 循环遍历数组中的每个学生,动态创建了表格的每一行和每个单元格,并将学生的信息填充到对应的单元格中。 最后,为每行的删除操作添加了点击事件处理程序。当用户单击...
javascript 表格行列动态添加,在formbean定义这个属性为String[]
网页表格用js动态添加一行代码,javascript应用
本文给大家分享使用原生javascript实现动态向表格中添加数据的方法,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子。