0顶

可以收缩和和伸展的表格

稿源：互联网 2022-08-05 22:14:50 点击： 296 撤稿纠错

可以收缩和和伸展的表格，网页中经常使用到，可自定义。

以下讨论的是和表格特效相关的可以收缩和和伸展的表格教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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" />
<title>www.alixixi.com</title>
<script language="javascript">
function tablecollapse()
{
	/* Variables */
	var collapseClass='footcollapse';
	var collapsePic='http://img.alixixi.com/icon_indextool.gif';
	var expandPic='http://img.alixixi.com/icon_indextool.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;

</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>
<table summary="CDs I listened to recently" class="footcollapse">
	<caption>My recent CDs</caption>
	<thead>
		<tr>
			<th>Title</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>My recent DVDs</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>They lost it</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>
<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于可以收缩和和伸展的表格的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2008071496154.shtml方便下次再访问哦。

·上一篇： 超简单实用的网页中任意漂浮的广告代码
·下一篇： 网页特效鼠标悬停图片渐显效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

可以收缩和和伸展的表格

文章分类LIST >>返回首页

最新游戏

最新新闻