利用js动态创建表格有两种方式:appendChild() 与 insertRow()+insertCell()。两种方式其实差不多,但第一种方式可能在IE上有问题,所以推荐第二种。
例子
1、insertRow() 与 insertCell()
insertRow()函数可以带参数,形式如下:
insertRow(index):index从0开始
insertRow()函数可以带参数,形式如下:
insertRow(index):index从0开始 。
一般我们在使用的时候都是:objTable.insertRow(objTable.rows.length),相当于在表格objTable最后新增一行。
insertCell()和insertRow的用法相同,这里就不再说了。
insertCell()和insertRow的用法相同,这里就不再说了。
2、deleteRow()和deleteCell()方法
deleteRow()函数可以带参数,形式如下:deleteRow(index):index从0开始
和上面两个方法差不多的意思,就是删除指定位置的行和单元格。要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除:
var row=document.getElementById("行的Id");
var index=row.rowIndex;//有这个属性,嘿嘿
objTable.deleteRow(index);
另外也可以通过document.getElementById("行的Id").removeNode();来进行删除
//特别注意:removeNode()只在IE下有效,在firefox chrome下均无效,需要使用removeChild替代
//removeNode(true):innerText也删除;
//removeNode(false):innerText保留
在使用过程中我碰到的一个问题跟大家说一下,就是删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的,所以如果你要删除表格的所有行,下面的代码是错误的:
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 = ojbTable.rows.length;
for( var i = 1 ;i < length ; i++){
objTable.deleteRow(0);
}
}
3、动态设置表格属性
语法:obj.setAttribute("attribute",值)
例子:<span style="font-family: Arial, Helvetica, sans-serif;">document.getElementById("border").onclick = function () {</span>
document.getElementById("tableid").setAttribute("bordercolor","red");
}
4、动态添加表格
var tr = table.insertRow(2);//在下标为2的行前添加一行
for( var i = 0 ; i < 4 ; i++){
var td = tr.insertCell(i);
//td.innerText= '新加行';//firefox下无效
td.innerHTML = "呢";//
}