本文出自CSDN,内容比较全面,js操作表格是很常用的功能,分享一下。
利用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");
for( var i=1; i<objTable.rows.length ; 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<length; i++ )
{
objTable.deleteRow(1);
}
}
3、动态设置单元格与行的属性
A、采用setAttribute()方法,格式如下:setAttribute(属性,属性值)
说明:这个方法几乎所有的DOM对象都可以使用,第一个参数是属性的名称,比如说:border,第二个就是你要为border设置的值了,比如:1
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
这个方法也全部适用,呵呵。
4、创建表格
了解了行<tr>与单元格<td>的增删那就可以创建表格了。
第一步:你需要有一个你去动态变化的表格,我这里讲的是已经存在页面的表格,我们要设置一个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 = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
newCellCartonNo.setAttribute("className","tablerdd");
这样就搞定了,可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子,不过方法就大概是上面的了,呵呵,慢慢摸索吧~
分享到:
相关推荐
JavaScript操作表格JavaScript操作表格JavaScript操作表格
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
javascript 表格操作
javascript操作表格
关于javascript 的表格操作的一些函数集合
经过多次应用后总结的对表格的经典操作,动态增加行,删除行,全选,删除全部等等...
静态实现javascript,实现表格的增加和删除等功能,值得初学者学习
JavaScript动态操作表格,添加,删除行、列及单元格
javascript操作表格的各种方法,多种源代码的集合.呵呵.整理好几天了
主要用到了元素的克隆,如何在各浏览器中兼容,并且在IE中如何统计动态操作后的行列数
JS自动添加,删除表格总结,及window窗体居中。内含源代码!!!!
基于javascript实现表格的简洁操作_.docx
JavaScript范例宝典 javascript工作中实例参考的很有帮助哦,留给自己以后工作中备用;另外因为整个文件很大(超过了csdn的限制15M),本人不得已按功能拆分上传。上传耗了我快一个小时,希望大家支持
Javascript操作表格 包括获取值,创建表格
js操作表格 实例 js操作表格 实例 js操作表格 实例
1.动态创建表格 2.表格具有间隔行颜色 3.具有鼠标进过高亮显示 4.可以进行编辑和删除 5.可以全选,全清,反选 6.编辑时可以显示下拉框,单选框和复选框
这个表格显示了一组学生的成绩信息,包括姓名、科目和得分,并提供了删除操作。 在页面中,先声明了一个 table 元素,并设置了 id 为 "student-table"。该表格包含了表头和表体,其中表头包含了四列:姓名、科目、...
可用于多选操作等等
javascirpt动态添加表格,添加行,添加列。编辑表格,一共八个列子。