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 相关文章推荐
mailto的使用技巧分享
Dec 21 Javascript
javascript之Partial Application学习
Jan 10 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
JavaScript中的 new 命令
May 22 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
浅谈node.js中间件有哪些类型
Apr 29 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
简单的js表格操作
2016/09/24 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python类的基础入门知识
2008/11/24 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
快速了解Python中的装饰器
2018/01/11 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
教师绩效考核方案
2014/01/21 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
律师催款函范文
2015/06/24 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
JavaScript实例 ODO List分析
2022/01/22 Javascript