CSS表格樣式：CSS JS打造可伸縮的表格_DIV+CSS實例
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      
　　應用xhtml CSS開發符合Web標準的網站，表格的用途是越來越少了。但數據顯示表格有著強大的優勢，并不是一味的認為，Web標準的網站就不用表格。這樣的理解是片面的，表格有它的功能與優勢，只是不再用表格進行布局罷了。

      　　我們看一個CSS JS打造可伸縮的表格的實例，在實際操作中，或許你我都會經常碰到這種形式的數據，看下面的效果圖：

      

      

      　　點擊表格右下角的小箭頭圖標，表格就會伸展開來，顯示出表格中的數據，此時的小簽頭就會變成收縮的形式，再次點擊，表格就會收縮起來，表格中的數據就實現了隱藏。

      　　這個實例需要你注重的是實現這樣的效果是JS的應用的功勞，CSS只是對表格進行了相關的顯示設置：

      

      

       示例代碼 [www.wf0088.com]
      

      body{
      font-family:Arial,Sans-Serif;
      font-size:90%;
      background:#cc9;
      }
      #boundary{
      background:#f8f8f8;
      padding:2em;
      width:40em;
      }
      h1{
      font-family:"Trebuchet MS",Sans-serif;
      text-transform:uppercase;
      color:#696;
      font-size:120%;
      }

      table.footcollapse{
      width:30em;
      }
      table.footcollapse caption{
      font-size:120%;
      text-transform:uppercase;
      text-align:left;
      padding:.5em 1em;
      }
      table.footcollapse th{
      text-align:left;
      }
      table.footcollapse,table.footcollapse th,table.footcollapse th
      {
      border:none;
      border-collapse:collapse; 
      }
      table.footcollapse thead th
      {
      width:10em;
      border-style:solid;
      border-width:1px;
      border-color:#cff #69c #69c #cff;
      background:#9cf;
      padding:2px 10px;
      }
      table.footcollapse tfoot th,
      table.footcollapse tfoot td
      {
      border-style:solid;
      border-width:1px;
      border-color:#9cf #369 #369 #9cf;
      background:#69c;
      padding:2px 10px;
      }
      table.footcollapse tbody{
      background:#ddd;
      }
      table.footcollapse tbody td{
      padding:5px 10px;
      border:1px solid #999;
      }
      table.footcollapse tbody th{
      padding:2px 10px;
      border:1px solid #999;
      border-left:none;
      }
      table.footcollapse tbody tr.odd{
      background:#ccc;
      }

      table.footcollapse tfoot td img{
      border:none;
      vertical-align:bottom;
      padding-left:10px;
      float:right;
      }
      

      
　　

      　　我們看下面的JS腳本：

      

      

       示例代碼 [www.wf0088.com]
      

      function tablecollapse()
      {
      /* Variables */
      var collapseClass='footcollapse';
      var collapsePic='arrow_up.gif';
      var expandPic='arrow_down.gif';
      var initialCollapse=true;

      // loop through all tables
      var t=document.getElementsByTagName('table');
      var checktest= new RegExp("(^|\\s)" collapseClass "(\\s|$)");
      for (var i=0;i<t.length;i )
      {
      // if the table has not the right class, skip it
      if(!checktest.test(t[i].className)){continue;} 

      // make the footer clickable
      t[i].getElementsByTagName('tfoot')[0].onclick=function()
      {
      // loop through all bodies of this table and show or hide 
      // them
      var tb=this.parentNode.getElementsByTagName('tbody');
      for(var i=0;i<tb.length;i )
      {
      tb[i].style.display=tb[i].style.display=='none'?'':'none';
      } 
      // change the image accordingly
      var li=this.getElementsByTagName('img')[0];
      li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic; _fcksavedurl="li.src.indexOf(collapsePic)==-1?collapsePic:expandPic;" 
      }
      // if the bodies should be collapsed initially, do so
      if(initialCollapse)
      {
      var tb=t[i].getElementsByTagName('tbody');
      for(var j=0;j<tb.length;j )
      {
      tb[j].style.display='none';
      } 
      }
      // add the image surrounded by a dummy link to allow keyboard 
      // access to the last cell in the footer
      var newa=document.createElement('a');
      newa.href='#';
      newa.onclick=function(){return false;}
      var newimg=document.createElement('img');
      newimg.src=initialCollapse?expandPic:collapsePic;
      var tf=t[i].getElementsByTagName('tfoot')[0];
      var lt=tf.getElementsByTagName('td')[tf.getElementsByTagName('td').length-1];
      newa.appendChild(newimg);
      lt.insertBefore(newa,lt.firstChild);
      } 
      }
      // run tablecollapse when the page loads
      window.onload=tablecollapse;
      

      

      　


      

      



      


      來源：無憂整理//所屬分類：DIV+CSS實例/更新時間：2007-03-24


      

      



      


      



      相關DIV+CSS實例：