可以收缩和和伸展的表格

时间:2010-04-09 12:24:26  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:;html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>www.webjx.com</title><script language="javascript">function tablecollapse(){ /* Variables */ var collap...
  正文:

看到效果后,可以点向下箭头展开表格,点向上按钮可以收缩表格!希望对您有用!

<!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.webjx.com</title>
<script language="JavaScript">
function tablecollaphotoshop/ target=_blank class=infotextkey>pse()
{
 /* Variables */
 var collapseClass='footcollapse';
 var collapsePic='http://webdesign.chinaitlab.com
/UploadFiles_8014/200706/20070620173213376.gif';
 var expandPic='http://webdesign.chinaitlab.com
/UploadFiles_8014/200706/20070620173213394.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

可以收缩和和伸展的表格》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13538.html


关键字:

关于《可以收缩和和伸展的表格》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td