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 相关文章推荐
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 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 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Pygame框架实现飞机大战
2020/08/07 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
2014年秋季开学典礼致辞
2014/08/02 职场文书
师德承诺书
2015/01/20 职场文书
2015年营业员工作总结
2015/04/23 职场文书
2016年记者节感言
2015/12/08 职场文书