javascript 动态添加表格行


Posted in Javascript onJune 22, 2006

表格部分代码如下:

<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= '新加行';

}

就这么简单,做点详细的说明:

1inserRow()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("这是新添加的行");

这个使用函数名实际上是一样的

 

设置其他的事件用法相同。

Javascript 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
document 和 document.all 分别什么时候用
Jun 22 #Javascript
可输入的下拉框
Jun 19 #Javascript
强制设为首页代码
Jun 19 #Javascript
html下载本地
Jun 19 #Javascript
动态加载iframe
Jun 16 #Javascript
网页里控制图片大小的相关代码
Jun 13 #Javascript
新闻内页-JS分页
Jun 07 #Javascript
You might like
ftp类(example.php)
2006/10/09 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
做网页的一些技巧
2007/02/01 Javascript
javascript 控制弹出窗口
2007/04/10 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python自动12306抢票软件实现代码
2018/02/24 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
python利用opencv实现颜色检测
2021/02/23 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
电气技术员岗位职责
2013/11/19 职场文书
学校后勤人员职责
2013/12/27 职场文书
管理失职检讨书
2014/02/12 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
公司行政管理制度范本
2015/08/05 职场文书