表格

应用xhtml+CSS开发符合Web标准的网站，表格的用途是越来越少了。但数据显示表格有着强大的优势，并不是一味的认为，Web标准的网站就不用表格。这样的理解是片面的，表格有它的功能与优势，只是不再用表格进行布局罢了。

　　我们看一个CSS+JS打造可伸缩的表格的实例，在实际操作中，或许你我都会常常遇到这种形式的数据，看下面的效果图：

　　点击表格右下角的小箭头图标，表格就会伸展开来，显示出表格中的数据，此时的小签头就会变成收缩的形式，再次点击，表格就会收缩起来，表格中的数据就实现了隐藏。

　　这个实例需要你注意的是实现这样的效果是JS的应用的功劳，CSS只是对表格进行了相关的显示设置：

Example Source Code [www.52css.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;
}

　　
　　点击下面的链接查看运行效果：
　　http://www.52css.com/attachments/month_0703/365/52css_com.html
　　我们看下面的JS脚本：

Example Source Code [www.52css.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;    
        }
        // 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;