动态添加表格行 文/Ray 表格部分代码如下:
动态添加表行的javascript函数如下: function addRow(){ //添加一行 var newTr = testTbl.insertRow(); //添加两列 var newTd0 = newTr.insertCell(); 情缘.教程_网 [http://Www.XiuGoo.Com] var newTd1 = newTr.insertCell(); //设置列内容和属性 newTd0.innerHTML = ''; newTd2.innerText= '新加行'; } 就这么简单,做点详细的说明: 1、inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index) 这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。 insertCell()和insertRow的用法相同。 2、动态设置属性和事件 上面行数中的innerHTML和innerText都是列的属性。 这个inner,就是“inner”到 设置其他属性也是用同样的方式,比如,设置行背景色 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("这是新添加的行"); } 这个使用函数名实际上是一样的 设置其他的事件用法相同。 |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-30 03:35 , Processed in 0.120606 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.