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

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

 

<script>
window.onload=function(){
vartable=document.createElement("table");
//给表格添加属性
table.width=300;//还可以使用这种方法：table.setAttribute('width',300)
table.border=1;</p> <p>//创建表格的标题
varcaption=document.createElement("caption");
table.appendChild(caption);</p> <p>//给表格的标题添加内容
//caption.innerHTML="人员表";//非W3c标准的方法
varcaptionText=document.createTextNode("人员表");
caption.appendChild(captionText);</p> <p>
//创建表格的第一行，是个标题行
varthead=document.createElement("thead");
table.appendChild(thead);</p> <p>vartr=document.createElement("tr");
thead.appendChild(tr);</p> <p>//列
varth1=document.createElement("th");
tr.appendChild(th1);
th1.innerHTML="数据";
varth2=document.createElement("th");
tr.appendChild(th2);
th2.innerHTML="数据";</p> <p>document.body.appendChild(table);
};
</script>

 二、使用DOM獲取表格數據

 

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

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

 

 

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

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

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

 

 

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

 

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

 

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

 

<script>
window.onload=function(){
//使用HTMLDOM来获取表格元素
vartable=document.getElementsByTagName('table')[0];//获取table引用</p> <p>//按HTMLDOM来删除标题、表头、表尾、行、单元格
//table.deleteCaption();//删除标题
//table.deleteTHead();//删除<thead>
//table.tBodies[0].deleteRow(0);//删除<tr>一行
//table.tBodies[0].rows[0].deleteCell(0);//删除<td>一个单元格
//table.tBodies[0].rows[0].deleteCell(1);//删除一个单元格中的内容，相当于删除掉一个单元格，后面的但愿会补进
};
</script>

 四、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<rowNum0.length;i++){
document.getElementById("grids~~TABLE").rows[i].deleteCell(4);//若從第6列開始4改為5
}
}

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

六、HTML Table對象之cellSpacing和cellPadding

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

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

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