javascript 动态添加表格行

转载 2006年06月21日 16:35: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动态向表格添加数据

利用javascript ,动态向表格中添加数据 1. 首先先写出表格的表头和主干部分 编号 姓名 职位 ...
  • ChauncyWu
  • ChauncyWu
  • 2017年01月23日 20:49
  • 3067

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

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

JavaScript动态添加/删除表格行

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

javascript动态添加表格数据行

  • 2013年11月02日 15:18
  • 18KB
  • 下载

JavaScript动态操作表格,添加,删除行、列及单元格

  • 2010年06月22日 11:21
  • 9KB
  • 下载

JavaScript动态操作表格,添加,删除行、列及单元格

  • 2013年12月05日 16:30
  • 2KB
  • 下载

JavaScript实现动态添加表格中的行

  • 2009年03月27日 15:04
  • 851B
  • 下载

javascript 动态添加表格行

javascript 动态添加表格行  原文地址:http://zengxiangshun.iteye.com/blog/1121779 动态添加表格行  表格部分代码如下:  第一...
  • zhengqiqiqinqin
  • zhengqiqiqinqin
  • 2013年07月05日 19:04
  • 684

JavaScript动态操作表格实例(添加,删除行,列及单元格)

JavaScript动态操作表格实例(添加,删除行,列及单元格) 2014-09-08 11:19 | 11504人阅读 | 来源 代码如下:       js动态操作表格...
  • weibingbing_net
  • weibingbing_net
  • 2015年07月27日 22:32
  • 290

javascript 动态添加表格行

表格部分代码如下: 第一行 第二行 第三行 动态添加表行的javascript函数如下: function addRow(){ //添加一行 ...
  • kungfu_panda
  • kungfu_panda
  • 2014年08月25日 15:02
  • 438
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 动态添加表格行
举报原因:
原因补充:

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