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+jRange实现滑动选取数值范围特效
Mar 14 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
快速入门Vue
Dec 19 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
vue.js实现二级菜单效果
Oct 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
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Python深入学习之特殊方法与多范式
2014/08/31 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
python实现猜拳小游戏
2020/04/05 Python
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
厨房领班竞聘演讲稿
2014/04/23 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery