table物件
table物件就是<table>,不過並沒有提供集合物件存取指定的<table>,使用使用id或name屬性來存取
document.mytable.border = 3;
summary屬性
<table summary="...">
此table的說明
它對於Browser而言是不會顯示,但對於網路蜘蛛則十分重要,是加分的屬性
scope屬性
<th scope="row | col">
th標題是要放在「行(row)」或「列(col)」
scope預設是row
指定th標題出現在表格上方第一行或左邊第一列
屬性
屬性
caption
存取表格的標題文字(如果存在)
border
存取表格框線尺寸
width
存取表格的寬度
cellPadding
存取儲存格文字內容和框線的距離
cellSpacing
存取儲存格框線間的距離
frame
存取表格外框線
rules
存取表格內框線
rows
傳回表格每一最TableRow物件的物件集合(Array)
tBodies
傳回<tbody>物件集合
tFoot
傳回<tfoot>物件集合
tHead
傳回<thead>物件集合
方法
在table中,每一儲存格都有一組index編號, index編號是由TableRow物件的rowIndex屬性和TableCell物件的cellIndex屬性所組成, (rowIndex, cellIndex) 所以一個二維表格裡每一儲存格Index編號是: (0,0)(0,1) (1,0)(1,1) (2,0)(2,1) …
table方法
insertRow(index)
插入一列<tr>,插入位置是在參數的列號之前
deleteRow(index)
刪除index的表格列
createCaption()
建立標題文字<caption>
deleteCaption()
刪除標題文字
createTHead()
建立標題區塊<thead>
deleteTHead()
刪除標題區塊
createTFoot()
建立註腳區塊<tfoot>
deleteTFoot()
刪除標題區塊
document.mytable.insertRow(0).insertCell(0); document.mytable.insertRow(0).insertCell(1);
刪除某一列
function deleteColumn(table, number) { //每行刪除對應儲存格 for (var i=0, len=table.rows.length; i < len; i++){ table.rows[i].deleteCell(number); } }
屬性/方法
另一種分類法
針對<table>元素
caption
指向<caption>元素(如果存在)
tBodies
指向<tbody>元素的集合
tFoot
指向<tfoot>元素(如果存在)
tHead
指向<thead>元素(如果存在)
rows
表格中所有「行」的集合
deleteRow(position)
刪除指定位置上的行
insertRow(position)
在rows集合中的指定位置插入一個新行
creatCaption()
建立<caption>元素並放入表格中
deleteCaption()
刪除<caption>元素
針對<tbody>元素
rows
<tbody>中所有行的集合
deleteRows(position)
刪除指定位置上的行
insertRows(position)
在rows集合中的指定位置插入一個新行
針對<tr>元素
cells
<tr>中所有儲存格的集合
deleteCell(position)
刪除指定位置上的儲存格
insertCell(position)
在cells集合的指定位置上插入一個新的儲存格
<tr> <td>儲存格1</td> <td>儲存格2</td> </tr>
<tr>...</tr>對應TableRow物件
TableRow --> rows[i]
<td>...</td>對應TableCell物件
TableCell --> cells[i]
mytable.rows[i].cells[i]; rows[i],第幾列 cells[i],第幾格
TableRow(<tr>)
屬性
TableRow屬性
cells
傳回表格列中儲存格TableCell物件集合(Array)
align
列中儲存格的水平對齊方式
vAlign
列中儲存格的垂直對齊方式
rowIndex
傳回TableRow物件的列號(Array)
sectionRowIndex
傳回<thead>、<tfoot>、<tbody>區塊中TableRow物件列號
方法
TableRow方法
insertCell(index)
插入儲存格在傳入index編號前
deleteCell(index)
刪除傳入index編號儲存格
TableCell(<td>)
屬性
TableCell屬性
align
儲存格的水平對齊方式
vAlign
儲存格的垂直對齊方式
colSpan
存取儲存格的左右合併,colspan屬性
rowSpan
存取儲存格的上下合併,rowspan屬性
cellIndex
傳回儲存格編號