JavaScript Table Element

table物件

table物件就是<table>，不過並沒有提供集合物件存取指定的<table>，使用使用id或name屬性來存取，例如，

document.mytable.border = 3; 

summary屬性

<table summary="This is KKBruce created Table"> 

此table的說明，它對於Browser而言是不會顯示，但對於網路蜘蛛則十分重要，是加分的屬性。

scope屬性

<th scope="row | col"> 

th標題是要放在「行(row)」或「列(col)」。scope預設是row，指定th標題出現在表格上方第一行或左邊第一列。

Table元素屬性

JavaScript Table元素屬性

名稱	說明
caption	存取表格的標題文字(如果存在)
border	存取表格框線尺寸
width	存取表格的寬度
cellPadding	存取儲存格文字內容和框線的距離
cellSpacing	存取儲存格框線間的距離
frame	存取表格外框線
rules	存取表格內框線
rows	傳回表格每一最TableRow物件的物件集合(Array)
tBodies	傳回<tbody>物件集合
tFoot	傳回<tfoot>物件集合
tHead	傳回<thead>物件集合

Table元素方法

在table中，每一儲存格都有一組index編號，index編號是由TableRow物件的rowIndex屬性和TableCell物件的cellIndex屬性所組成，(rowIndex, cellIndex) 所以一個二維表格裡每一儲存格Index編號是：
(0,0)(0,1)
(1,0)(1,1)
(2,0)(2,1)
…

JavaScript 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); 

刪除table某一列

function deleteColumn(table, number) {
  //每行刪除對應儲存格
  for (var i=0, len=table.rows.length; i < len; i++){
    table.rows[i].deleteCell(number);
  }
} 

Table元素屬性與方法

另一種分類法：

針對table元素：

JavaScript table元素屬性與方法

名稱	說明
caption	指向<caption>元素(如果存在)
tBodies	指向<tbody>元素的集合
tFoot	指向<tfoot>元素(如果存在)
tHead	指向<thead>元素(如果存在)
rows	表格中所有「行」的集合
deleteRow(position)	刪除指定位置上的行
insertRow(position)	在rows集合中的指定位置插入一個新行
creatCaption()	建立<caption>元素並放入表格中
deleteCaption()	刪除<caption>元素

針對tbody元素：

avaScript tbody元素屬性與方法

名稱	說明
rows	<tbody>中所有行的集合
deleteRows(position)	刪除指定位置上的行
insertRows(position)	在rows集合中的指定位置插入一個新行

針對tr元素：

JavaScript 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]。

// rows[i]，第幾列
// cells[i]，第幾格 
mytable.rows[i].cells[i];

TableRow(<tr>)

JavaScript TableRow屬性

名稱	說明
cells	傳回表格列中儲存格TableCell物件集合(Array)
align	列中儲存格的水平對齊方式
vAlign	列中儲存格的垂直對齊方式
rowIndex	傳回TableRow物件的列號(Array)
sectionRowIndex	傳回<thead>、<tfoot>、<tbody>區塊中TableRow物件列號

JavaScript TableRow方法

名稱	說明
insertCell(index)	插入儲存格在傳入index編號前
deleteCell(index)	刪除傳入index編號儲存格

TableCell(<td>)

JavaScript TableCell屬性

名稱	說明
align	儲存格的水平對齊方式
vAlign	儲存格的垂直對齊方式
colSpan	存取儲存格的左右合併，colspan屬性
rowSpan	存取儲存格的上下合併，rowspan屬性
cellIndex	傳回儲存格編號