JS动态创建表格,兼容IEFireFox
luyued 发布于 2011-01-28 22:31 浏览 N 次1、insertRow()和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");
for( var i=1; i
tblObj.deleteRow(i);
}
}
这段代码要删除原来的表格的表体,有两个问题。首先不能是deleteRow(i),应该是deleteRow(1)。因为在删除表格行的时候,表格的行数在变化,这就是问题的关键,rows.length总是在变小,删除的行数总是会比预想的要少一半,所以正确的删除表格的行的代码应该这样:
复制内容到剪贴板代码:
function clearRow(){
objTable= document.getElementById("myTable");
var length= objTable.rows.length ;
for( var i=1; i
objTable.deleteRow(i);
}
}
3、动态设置单元格与行的属性
A、采用setAttribute()方法
格式如下:setAttribute(属性,属性值)
说明:这个方法几乎所有的DOM对象都可以使用,第一个参数是属性的名称,比如说:border,第二个就是你要为border设置的值了,比如:
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border",1);//为表格设置边框为1
其他的比如你要为一个TD设置高度,同样先取得这个TD对象,然后使用setAttribute()方法
var objCell = document.getElementById("myCell");
objCell.setAttribute("height",24);//为单元格设置高度为24
在使用的时候遇到一个设置样式的问题,不能用setAttribute("class","inputbox2");而应该使用 setAttribute("className","inputbox2"),呵呵,其他我估计也有同样的问题,有些属性和我们在DW里面的不一致,呵 呵,大家自己摸索吧。
B、直接赋值
var objMyTable = document.getElementById("myTable");
objMyTable.border=1;//为表格设置边框为1
这个方法也全部适用,呵呵。
C、复合属性
var objMyTable = document.getElementById("myTable");
objMyTable.style.cursor = "pointer";
4、创建表格
了解了行与单元格的增删那就可以创建表格了。
第一步:你需要有一个你去动态变化的表格,我这里讲的是已经存在页面的表格,我们要设置一个id:myTable
var objMyTable = document.getElementById("myTable");
第二步:创建行与列的对象
var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//要新增的行,我这里是从倒数第二行开始新增的
//单元格箱号
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " ";
newCellCartonNo.setAttribute("className","tablerdd");
5、添加事件
A、无参数的情况
function doalter(){
alert('hi');
}
var tr = Table.insertRow();
tr.attachEvent("onclick",doalter); 或 tr.setAttribute("onclick","doalter()"); 或 tr.onclick=function(){doalter();}; 或 tr.onclick=doalter;
B、传参数的方法
var trMouseMove = function(obj)
{
return function()
{
obj.className='selected';
}
}
var tr = Table.insertRow();
tr.attachEvent("onmousemove",AddrSelfMouseMove(tr));
类别:Javascript 查看评论
- 07-01· 埃古RI&G:中国第三代休闲
- 07-01· 潇洒男士 Perry Ellis闲适生
- 07-01· 全明星阵容点亮CFDA颁奖红
- 07-01· 第十届中国休闲服装博览
- 07-01· tough jeans挎包 - 淘宝网商城
- 07-01· 钱包英语英文T开头的钱包
- 07-01· Toughjeans-散发着青春的活力
- 07-01· 平湖服装以“外”养“内
- 07-01· 护理液 海昌隐形眼镜护理
- 07-01· 潮流趋势 Red Carter 08春夏迈
- 07-01· 【中国服装面料行业投资
- 07-01· [转载]少年户外-2009中国户
- 07-01· 衡阳4s 衡阳nokia5320 nokia5
- 07-01· 挽春踏青 欢享夏风组图
- 07-01· Linux的硬链接(Hard Link)与
- 07-01· 共享精美边框和代码
- 07-01· Skyscraper Annual 航模比赛_
- 07-01· 小池一夫天涯孤客日文版
- 07-01· 绿竹与青萝
- 07-01· 四川水田惊现2亿年前生物