使用html dom操作表格,JavaScript DOM对表格的操作

了解下table的属性与子标签

summary 属性：用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。

bordercolor 属性：用来设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。(不推荐使用bordercolor 属性，而推荐使用CSS 样式表的border 属性来进行设置)

cellspacing 属性：用来设置表格的单元格之间的间距。(推荐使用CSS 样式表的border-collapse 属性来进行设置)

标记：表示表格的大标题，该标记可以出现在

一个表格例子

报表

 2005200620072008

拨款11,98012,6509,70010,600捐款4,7804,9896,7006,590投资8,0008,1008,7608,490募捐3,2003,1203,7004,2102008 年统计

表格显示如下：

报表 2005 - 2008

2005

2006

2007

2008

拨款

11,980

12,650

9,700

10,600

捐款

4,780

4,989

6,700

6,590

投资

8,000

8,100

8,760

8,490

募捐

3,200

3,120

3,700

4,210

2008 年统计

注意：IE6 只有标记支持:hover 伪类，其余标签都不支持！并且标记的伪类有顺序：a:link -> a:visited -> a:hover -> a:active

利用DOM 的方法和属性实现对表格的动态操作

利用DOM 动态添加一行：

window.οnlοad=function(){

//插入一行

var oTr = document.getElementById("mytable").insertRow(2);

var aText = new Array();

aText[0] = document.createTextNode("cell1的内容");

aText[1] = document.createTextNode("cell2的内容");

aText[2] = document.createTextNode("cell3的内容");

aText[3] = document.createTextNode("cell4的内容");

aText[4] = document.createTextNode("cell5的内容");

for(var i=0;i

var oTd = oTr.insertCell(i);

oTd.appendChild(aText[i]);

}

}

利用DOM 修改单元格内容：

window.οnlοad=function(){

var oTable = document.getElementById("mytable");

//修改单元格内容

oTable.rows[3].cells[4].innerHTML = "更改的内容";

}

利用DOM 删除一个单元格或一行：

window.οnlοad=function(){

var oTable = document.getElementById("mytable");

//删除一行，后面的行号自动补齐

oTable.deleteRow(2);

//删除一个单元格，后面的也自动补齐

oTable.rows[2].deleteCell(1);

}

利用DOM 动态添加一列，并动态删除某行：

function myDelete(){

var oTable = document.getElementById("mytable");

//删除该行

this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

}

window.οnlοad=function(){

var oTable = document.getElementById("mytable");

var oTd;

//动态添加delete链接

for(var i=1;i

oTd = oTable.rows[i].insertCell(5);

oTd.innerHTML = "delete";

oTd.firstChild.onclick = myDelete; //添加删除事件

}

}

利用DOM 动态删除某一列：

function deleteColumn(oTable,iNum){

//自定义删除列函数，即每行删除相应单元格

for(var i=0;i

oTable.rows[i].deleteCell(iNum);

}

window.οnlοad=function(){

var oTable = document.getElementById("mytable");

deleteColumn(oTable,2); //参数2:表示要删除的列号

}