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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
Angular中$compile源码分析
Jan 28 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
详解webpack 热更新优化
Sep 13 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php中常用编辑器推荐
2007/01/02 PHP
php 字符转义 注意事项
2009/05/27 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python 快速排序代码
2009/11/23 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
RetroStage德国:复古服装
2019/02/03 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
美容院考勤制度
2014/01/30 职场文书
社团活动总结模板
2014/06/30 职场文书
公司开除员工通知
2015/04/22 职场文书
烈士陵园观后感
2015/06/08 职场文书
教育教学读书笔记
2015/07/02 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
浅谈redis整数集为什么不能降级
2021/07/25 Redis