2009年1月6日

table:特徵一頁

特徵一頁 | 二頁 | 三頁 | 方法 | 成員表

table 物件的特徵與方法,可用於讀取或動態變更 TABLE 元素的內容。

table 的特徵
caption

存放 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 製作

    學生總成績

rows

存放欄物件的清單。

  • 程式用法:

    <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 製作

tBodies

存放 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>

  • 執行結果:

    1
    點此秀出 TBODY

tFoot

存放 TFOOD

  • 程式用法:

    <a href='javascript:alert(
      document.getElementById("tbl").tFoot.innerHTML)'>
    點此秀出 TFOOD</a>

  • 執行結果:

    點此秀出 TFOOD

tHead

存放 THEAD

  • 程式用法:

    <a href='javascript:alert(
      document.getElementById("tbl").tHead.innerHTML)'>
    點此秀出 THEAD</a>

  • 執行結果:

    點此秀出 THEAD

width

讀取或設定報表的 寬度

  • 程式用法:

    <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>

  • 執行結果:

    名稱分類
    殭屍峽谷保衛戰射擊遊戲

    點此改變寬度


©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。