用户点击按钮就可以实现表格图层伸展和收缩显示特效，实用的一个网页特效，根据自己的需求来修改即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>表格展开与收缩特效分享_武鸣人</title>
<script language="javascript">
function tablecollapse()
{
/* Variables */
var collapseClass='footcollapse';
var collapsePic='/img/20240523_www_wuming_ren_1.gif';
var expandPic='/img/20240523_www_wuming_ren_1.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++)
{//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
// 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;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
// 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);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
// run tablecollapse when the page loads
window.onload=tablecollapse;
</script>
<style type="text/css">
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;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<table summary="CDs I listened to recently" class="footcollapse">
<caption>武鸣人一号</caption>
<thead>
<tr>
<th>武鸣人</th>
<th>Artist</th>
<th>Quality</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<td colspan="2">5 CDs</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Front 242</th>
<td>Front By Front</td>
<td>Quite OK</td>
</tr>
<tr class="odd">
<th>Miss Kittin</th>
<td>i.com</td>
<td>good buy</td>
</tr>
<tr>
<th>Die Fantastischen Vier</th>
<td>Viel</td>
<td>Nice comeback</td>
</tr>
<tr class="odd">
<th>Nine Inch Nails</th>
<td>With Teeth</td>
<td>Oh yes, finally a new one</td>
</tr>
<tr>
<th>Garbage</th>
<td>Bleed like me</td>
<td>Needs more listening</td>
</tr>
</tbody>
</table>
<table summary="DVDs I watched recently" class="footcollapse">
<caption>武鸣人二号</caption>
<thead>
<tr>
<th>Title</th>
<th>Quality</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<td>5 DVDs</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Star Trek TNG Season 7</th>
<td>wuming.ren</td>
</tr>
<tr class="odd">
<th>Big Fish</th>
<td>Wonderful Tale</td>
</tr>
<tr>
<th>Closer</th>
<td>I want my time back!</td>
</tr>
<tr class="odd">
<th>Hot Shots</th>
<td>Always worth it</td>
</tr>
<tr>
<th>The Party</th>
<td>A shame there is not more Sellers</td>
</tr>
</tbody>
</table>
</body>
</html>本文来自武鸣人网站，转载请注明出处