tableRow 物件的特徵與方法，可用於讀取或動態變更 TABLE 元素的欄之內容。可以用 rows 存取報表的欄。
讀取或設定欄的水平對齊法。
- 程式用法：
<table id='tbl' bgcolor='#333388' rules=all width="400px">
<caption>線上遊戲</caption>
<tr align=left><th>名稱<th>分類
<tr align=center><td>沙灘車越峽谷<td>障礙遊戲
</table>
<p>
<script type='text/javascript'>
document.write( document.getElementById('tbl').rows[1].align );
function alignDM()
{
document.getElementById('tbl').rows[1].align='right';
alert( document.getElementById('tbl').rows[1].align );
}
</script>
<p><a href='javascript:alignDM()'>
點此改成靠右</a> - 執行結果：
線上遊戲 名稱 分類 沙灘車越峽谷 障礙遊戲 center
- 上例中，筆者曾嘗試改變 TH 的水平對齊，結果是：IE 不能改變 TH 的水平對齊；Firefox, Safari, Chrome 則可以。
讀取或設定欄的背景顏色。
- 程式用法：
<table id='tbl1' bgcolor='#333388' rules=all>
<caption>好玩遊戲</caption>
<tr><th>名稱<th>分類
<tr><td>噴水人戰突變人<td>槍戰遊戲
</table>
<script type='text/javascript'>
function bgColorDM()
{
document.getElementById('tbl1').rows[1].bgColor='red';
alert( document.getElementById('tbl1').rows[1].bgColor );
}
</script>
<p><a href='javascript:bgColorDM()'>
點此改成紅色</a> - 執行結果：
好玩遊戲 名稱 分類 噴水人戰突變人 槍戰遊戲
- 上例中，IE 要再點視窗其它地方後才會變色。
存放欄的小方格清單。唯讀。
- 程式用法：
<script type='text/javascript'>
var cs=document.getElementById('tbl1').rows[1].cells;
for( var i=0; i < cs.length; i++)
document.write( cs[i].innerHTML +' / ')
</script> - 執行結果：
噴水人戰突變人 / 槍戰遊戲 /
存放欄在整個報表中邏輯順序的指標。不管 THEAD, TBODY 等的分割。
存放欄在區塊中邏輯順序的指標。報表被 THEAD, TBODY 等分割成區塊。
- 程式用法：
<table id='tbl2' bgcolor='#333388' rules=all>
<thead>
<tr><td>好玩遊戲
</thead>
<tbody>
<tr><td>噴水人戰突變人
<tr><td>槍戰遊戲
</tbody>
<tbody>
<tr><td>小遊戲
<tr><td>線上遊戲
<tr><td>益智遊戲
</tbody>
</table>
<script type='text/javascript'>
var tb=document.getElementById('tbl2');
document.write( 'rowIndex：')
for( var i=0; i < tb.rows.length; i++)
document.write( tb.rows[i].rowIndex +' / ')
document.write( '<br />sectionRowIndex：')
for( var i=0; i < tb.rows.length; i++)
document.write( tb.rows[i].sectionRowIndex +' / ')
</script> - 執行結果：
rowIndex：0 / 1 / 2 / 3 / 4 / 5 /好玩遊戲 噴水人戰突變人 槍戰遊戲 小遊戲 線上遊戲 益智遊戲
sectionRowIndex：0 / 0 / 1 / 0 / 1 / 2 /
讀取或設定欄的垂直對齊。
- 程式用法：
<table id='tbl3' bgcolor='#333388' rules=all>
<caption>好玩遊戲</caption>
<tr><th>名稱<th>分類
<tr><td height='100px'>噴水人戰突變人<td>槍戰遊戲
</table>
<script type='text/javascript'>
function vAlignDM()
{
document.getElementById('tbl3').rows[1].vAlign='top';
alert( document.getElementById('tbl3').rows[1].vAlign );
}
</script>
<p><a href='javascript:vAlignDM()'>
點此對齊頂端</a> - 執行結果：
好玩遊戲 名稱 分類 噴水人戰突變人 槍戰遊戲
- 上例中，Chrome 沒移到頂端；IE, Firefox, Safari 都成功。
