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 相关文章推荐
js打印纸函数代码(递归)
Jun 18 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
vue设置一开始进入的页面教程
Oct 28 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
php接口和抽象类使用示例详解
2014/03/02 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
ant design实现圈选功能
2019/12/17 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
python中的装饰器详解
2015/04/13 Python
Python读取word文本操作详解
2018/01/22 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
Why we need EJB
2016/10/20 面试题
创业计划书的内容步骤和要领
2014/01/04 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
手术室护士个人总结
2015/02/13 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
最美乡村教师观后感
2015/06/11 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers