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傳回儲存格編號

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。