存取報表的 TD 元素

這個練習是要將報表的每一個小格子的資料讀出來。由於一個報表的小格子很多，無法每一個格子都設 ID，然後用 getElementById() 讀取其內容。這個練習使用以下的特徵與方法來讀取小格子內容：

1. TABLE 元素：用來建立報表。
2. TD 元素：用來存放小格子的內容。
3. table.rows[]：報表的每一橫欄對應一個 rows[]，可藉此取得橫欄的物件。
4. cells[]：用來取得小格子的物件。
5. innerHTML：用來讀取小格子的內容。

下面的範例只用來讀取小格子的內容，但是只要加上其它程序碼，也可以更改小格子的內容。如果要增減報表的橫欄，則要用到 insertRow(), deleteRow() 兩個方法。 <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'> var tb=document.getElementById('tbl'); for(var i=0; i < tb.rows.length; i++) { for( var j=0; j < tb.rows[i].cells.length; j++) document.write( tb.rows[i].cells[j].innerHTML +' <b>|</b> '); document.write('<br />'); } </script>