table 物件的特徵與方法,可用於讀取或動態變更 TABLE 元素的內容。
存放 CAPTION 。
- 程式用法:
<table id='tbl' bgcolor='#333388' rules=all>
<caption>學生總成績</caption>
<thead>
<tr><th>學號<th>姓名<th>學科<th>成績
</thead>
<tbody>
<tr><td>51<td>螞蟻<td>物理<td>99
<tr><td>52<td>蚱蜢<td>物理<td>59
</tbody>
<tfoot>
<tr><td colspan=4>2009/1/6 製作
</tfoot>
</table>
<p>
<script type='text/javascript'>
document.write(
document.getElementById('tbl').
caption.innerHTML );
</script> - 執行結果:
學生總成績 學號 姓名 學科 成績 51 螞蟻 物理 99 52 蚱蜢 物理 59 2009/1/6 製作 學生總成績
存放欄物件的清單。
- 程式用法:
<script type='text/javascript'>
var tb=document.getElementById('tbl');
for(var i=0; i < tb.rows.length; i++)
{
if( tb.rows[i].textContent )
document.write( tb.rows[i].textContent +'<br />');
else
document.write( tb.rows[i].innerText +'<br />');
}
</script> - 執行結果:
學號姓名學科成績
51螞蟻物理99
52蚱蜢物理59
2009/1/6 製作
存放 TBODY 的清單。一份 TABLE 可放多個 TBODY,會依序放在清單中。
- 程式用法:
<script type='text/javascript'>
document.write(
document.getElementById('tbl').tBodies.length +'<br />');
</script>
<a href='javascript:alert(
document.getElementById("tbl").tBodies[0].innerHTML)'>
點此秀出 TBODY</a> - 執行結果:
存放 TFOOD 。
- 程式用法:
<a href='javascript:alert(
document.getElementById("tbl").tFoot.innerHTML)'>
點此秀出 TFOOD</a> - 執行結果:
存放 THEAD 。
- 程式用法:
<a href='javascript:alert(
document.getElementById("tbl").tHead.innerHTML)'>
點此秀出 THEAD</a> - 執行結果:
讀取或設定報表的 寬度。
- 程式用法:
<table id='tbla' bgcolor='#333388' rules=all>
<tr><th>名稱<th>分類
<tr><td>殭屍峽谷保衛戰<td>射擊遊戲
</table>
<script type='text/javascript'>
function widthDM()
{
document.getElementById('tbla').width='50%';
}
</script>
<p><a href='javascript:widthDM()'>
點此改變寬度</a> - 執行結果:
名稱 分類 殭屍峽谷保衛戰 射擊遊戲