首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

javascript 动态创建表格:新增、删除行跟单元格(转)

2012-11-22 
javascript 动态创建表格:新增、删除行和单元格(转)来自:http://school.cnd8.com/javascript/jiaocheng/416

javascript 动态创建表格:新增、删除行和单元格(转)
来自:http://school.cnd8.com/javascript/jiaocheng/41620.htm
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。

1、inserRow()和insertCell()函数

insertRow()函数可以带参数,形式如下:

insertRow(index):index从0开始

这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后。一般我们在使用的时候都是:objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。

insertCell()和insertRow的用法相同,这里就不再说了。

2、deleteRow()和deleteCell()方法

deleteRow()函数可以带参数,形式如下:deleteRow(index):index从0开始

和上面两个方法差不多的意思,就是删除指定位置的行和单元格。要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除:

var row=document.getElementById("行的Id");
var index=row.rowIndex;//有这个属性,嘿嘿
objTable.deleteRow(index);

在使用过程中我碰到的一个问题跟大家说一下,就是删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的,所以如果你要删除表格的所有行,下面的代码是错误的:

function clearRow(){  objTable= document.getElementById("myTable");  var length= objTable.rows.length ;  for( var i=1; i<length; i++ )  {    objTable.deleteRow(i);  }} 

热点排行