javascript 动态添加表格行

原创 2006年06月14日 17:32:00

动态添加表格行 

文/Ray

 表格部分代码如下:

<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动态删除表格行,参考http://blog.csdn.net/Rayfly/archive/2006/04/16/665671.aspx

JavaScript动态添加/删除表格行

使用原生JavaScript来解决简单的table行动态增删问题
  • sqq0103
  • sqq0103
  • 2016年12月16日 22:23
  • 1260

javascript动态加载表格与动态添加表格行

一、动态加载表格       1.首先在html中为表格的添加位置设置id                即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下  ...
  • iamshiny
  • iamshiny
  • 2013年11月26日 22:14
  • 1441

js实现动态添加表格的行

js实现动态添加表格的行
  • qq_15536303
  • qq_15536303
  • 2016年08月07日 11:36
  • 748

javascript动态添加表格行

动态添加表格行 文/Ray 表格部分代码如下:testTbl" border=1>tr1">box1">第一行tr2">box2">第二行box3">第三行动态添加表行的javascript函数如下:...
  • sweetsoft
  • sweetsoft
  • 2006年08月09日 08:49
  • 1072

JavaScript动态添加表格行

表格部分代码如下: 第一行 第二行
  • Vinda2012
  • Vinda2012
  • 2010年12月22日 19:32
  • 1011

javascript 动态添加表格行

原文出处:[url]http://www.wangchao.net.cn/bbsdetail_305567.html[/url]动态添加表格行 文/Ray 表格部分代码如下:第一行第二行第三行动态添加...
  • fightplane
  • fightplane
  • 2007年03月09日 17:56
  • 499

js在不刷新的情况下动态添加表格行

动态添加表格行
  • judyge
  • judyge
  • 2015年12月13日 13:43
  • 263

利用javaScript动态添加表格行

本文简单介绍如何利用javaScript动态添加表格行,关键是解决firefox无法添加的问题。网上大部分是这样的function addRow(content) {     //添加一行     v...
  • liweiby
  • liweiby
  • 2009年01月12日 14:08
  • 305

Javascript 动态添加删除表格行

用JS实现动态添加或删除表格的行,有两种方法:(1)添加:用HTML DOM Table对象的insertRow()方法创建TableRow对象,一个                 TableRow...
  • gideal_wang
  • gideal_wang
  • 2009年05月20日 17:38
  • 4309

JavaScript 动态添加删除表格行

http://blog.nettoapp.com/article.asp?id=172动态添加、删除行,分别通过insertRow,deleteRow方法实现,显示行号,通过rowIndex属性获得,...
  • xiaoxin888888
  • xiaoxin888888
  • 2009年04月24日 00:32
  • 1275
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 动态添加表格行
举报原因:
原因补充:

(最多只允许输入30个字)