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 相关文章推荐
JavaScript关于select的相关操作说明
Jan 13 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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小偷的核心程序
2007/04/09 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
联强国际笔试题面试题
2013/07/10 面试题
两道JAVA笔试题
2016/09/14 面试题
导游词之南京夫子庙
2019/12/09 职场文书