tableRow 特徵

特徵 | 方法

tableRow 物件的特徵與方法，可用於讀取或動態變更 TABLE 元素的欄之內容。可以用 rows 存取報表的欄。

tableRow 的特徵

align

讀取或設定欄的水平對齊法。 <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>

• 上例中，筆者曾嘗試改變 TH 的水平對齊，結果是：IE 不能改變 TH 的水平對齊；Firefox, Safari, Chrome 則可以。

bgColor

讀取或設定欄的背景顏色。 <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 要再點視窗其它地方後才會變色。

cells

存放欄的小方格清單。唯讀。 <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>

rowIndex

存放欄在整個報表中邏輯順序的指標。不管 THEAD, TBODY 等的分割。

sectionRowIndex

存放欄在區塊中邏輯順序的指標。報表被 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>

vAlign

讀取或設定欄的垂直對齊。 <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 都成功。