CSS表格樣式：CSS JS打造可伸縮的表格_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
應用xhtml CSS開發符合Web標準的網站，表格的用途是越來越少了。但數據顯示表格有著強大的優勢，并不是一味的認為，Web標準的網站就不用表格。這樣的理解是片面的，表格有它的功能與優勢，只是不再用表格進行布局罷了。
我們看一個CSS JS打造可伸縮的表格的實例，在實際操作中，或許你我都會經常碰到這種形式的數據，看下面的效果圖：
點擊表格右下角的小箭頭圖標，表格就會伸展開來，顯示出表格中的數據，此時的小簽頭就會變成收縮的形式，再次點擊，表格就會收縮起來，表格中的數據就實現了隱藏。
這個實例需要你注重的是實現這樣的效果是JS的應用的功勞，CSS只是對表格進行了相關的顯示設置：
我們看下面的JS腳本：
我們看一個CSS JS打造可伸縮的表格的實例，在實際操作中，或許你我都會經常碰到這種形式的數據，看下面的效果圖：
點擊表格右下角的小箭頭圖標，表格就會伸展開來，顯示出表格中的數據，此時的小簽頭就會變成收縮的形式，再次點擊，表格就會收縮起來，表格中的數據就實現了隱藏。
這個實例需要你注重的是實現這樣的效果是JS的應用的功勞，CSS只是對表格進行了相關的顯示設置：
示例代碼 [m.ghpqjb.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;
}
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腳本：
示例代碼 [m.ghpqjb.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;
{
/* 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實例：
- 相關鏈接：
- 教程說明：
DIV+CSS實例-CSS表格樣式：CSS JS打造可伸縮的表格
。