JavaScript之HTML DOM操作Table（表格）對象

一、使用HTML DOM創建表格函數

 

 二、使用DOM獲取表格數據

 

window.οnlοad=function(){
vartable=document.getElementsByTagName("table")[0];
alert(table.children[0].innerHTML);
};

 三、使用HTML DOM獲取表格數據

 

 

window.οnlοad=function(){
//使用HTMLDOM来获取表格元素
vartable=document.getElementsByTagName('table')[0];//获取table引用
//按HTMLDOM来获取表格的
alert(table.caption.innerHTML);//获取caption的内容
//table.caption.innerHTML="学生表";//还可以设置值
};

window.οnlοad=function(){
//使用HTMLDOM来获取表格元素
vartable=document.getElementsByTagName('table')[0];//获取table引用
//按HTMLDOM来获取表头表尾、
alert(table.tHead);//获取表头
alert(table.tFoot);//获取表尾
 
//按HTMLDOM来获取表体
alert(table.tBodies);//获取表体的集合
};

 在一个表格中和是唯一的，只能有一个。而不是唯一的可以有多个，这样导致最后返回的和是元素引用，而返回的是元素集合。

 

 

window.οnlοad=function(){
//使用HTMLDOM来获取表格元素
vartable=document.getElementsByTagName('table')[0];//获取table引用
//按HTMLDOM来获取表格的行数
alert(table.rows.length);//获取行数的集合，数量
 
//按HTMLDOM来获取表格主体里的行数
alert(table.tBodies[0].rows.length);//获取主体的行数的集合，数量
};

 

window.οnlοad=function(){
//使用HTMLDOM来获取表格元素
vartable=document.getElementsByTagName('table')[0];//获取table引用
 
//按HTMLDOM来获取表格主体内第一行的单元格数量(tr)
alert(table.tBodies[0].rows[0].cells.length);//获取第一行单元格的数量
};

 

window.οnlοad=function(){
//使用HTMLDOM来获取表格元素
vartable=document.getElementsByTagName('table')[0];//获取table引用
 
//按HTMLDOM来获取表格主体内第一行第一个单元格的内容(td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML);//获取第一行第一个单元格的内容
};

 

 四、HTML DOM中常用的屬性和方法

 

• rows属性，返回表格中的tr元素对象数组，它的长度就是表格的行数
• createCaption()方法
• createTHead()方法
• createTFoot()方法
• insertRow()方法，在指定位置插入一行
• deleteRow()方，删除指定一行

• TableRow Element表示表格的一行，TableRow的常用属性和方法：

  • cells属性，值为行中td元素的对象数组
  • rowIndex属性，表格中的总行号
  • sectionRowIndex属性，该行在表格的某段的具体行号(相对于thead，tfoot)
  • insertCell()方法，插入一个td
  • deleteCell()删除一个td

    TableCell Element表示表格的一个单元格，常见属性方法：

  • cellIndex属性，单元格在该行的列号
    TableSection 表示表格的一部分(thead,tbody,tfoot)，常见属性方法与Table相同。

五、刪除列操作

第一種寫法
document.getElementById("grids~~TABLE").rows[0].deleteCell(4);
document.getElementById("grids~~TABLE").rows[1].deleteCell(4);//代碼執行到這說明已經刪除了一列
document.getElementById("grids~~TABLE").rows[0].deleteCell(4);
document.getElementById("grids~~TABLE").rows[1].deleteCell(4);
*/
說明：總共有6列，由於已經刪除了一列，所以列數為5，但是還是從第五列開始刪除的
//第二種寫法
var rowNum0 =  document.getElementById("grids~~TABLE").rows;  //或者行數對象，rowNum.length為行數值
//alert(rowNum0.length);
for(var j = 0;j<2;j++){//若刪除后三列2改為3
for(var i=0;i

 上述代碼是用JavaScript刪除一個行數為rowNum0.length、列數為6的表格，刪除后兩列（從第五列開始的，因為表格可以看成數組，故第一列用“0”表示）的操作函數

六、HTML Table對象之cellSpacing和cellPadding

cellPadding 属性可设置或返回单元格边框与单元格内容之间的空白量（以像素为单位）。

cellPadding设置或返回单元格内容和单元格边框之间的空白量。

用法：如：document.getElementById("table").cellPadding="15";