javaScript
1.
<!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=gbk" /> <title>StripingTable</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){$("#helloDiv").hide(); }); function changeDisplay(){ var helloDivObj = $("#helloDiv"); var buttonObj = $("#btnDisplay"); var val = buttonObj.attr("value"); if(val=="隐藏"){ helloDivObj.hide(); buttonObj.attr("value","显示"); }else{ helloDivObj.show(); buttonObj.attr("value","隐藏"); } } --> </script> </head> <body> <input id="btnDisplay" type="button" value="隐藏" onclick="changeDisplay()" /> <div id="helloDiv"> Hello,everyone<p></p> Hello,everytwo<p></p> Hello,everythree<p></p> </div> </bdoy> </html>
2.
<style> #content { font-size: 14px; width: 100%; height: 50px; background: #eee; padding: 10px; border: 4px #ccc double; overflow: hidden; } #key { color: red; float: right; margin-top: -20px; } span{cursor:pointer;} </style> <script> var s=5; var minheight=50; var maxheight=450; function shoppingcat(){ var content=document.getElementById("content"); var key = document.getElementById("key"); var t=content.style; if(t.height==""||t.height==0) t.height=minheight; var h=parseInt(t.height); if(key.innerHTML=="展开"){ h+=s; t.height=h+"px"; if(h<maxheight){ setTimeout("shoppingcat();",1); }else{ key.innerHTML="关闭"; } }else{ h-=s; t.height=h+"px"; if(h>minheight){ setTimeout("shoppingcat();",1); }else{ key.innerHTML="展开"; } } } </script> <div id="content"><br/> <span id="key" onclick="shoppingcat();">展开</span><br/> 藤床纸帐朝眠起, 说不尽、无佳思。 沈香烟断玉炉寒, 伴我情怀如水。 笛声三弄, 梅心惊破, 多少春情意。 小风疏雨萧萧地, 又催下、千行泪。 吹箫人去玉楼空, 肠断与谁同倚? 一枝折得, 人间天上, 没个人堪寄。 欢迎再次光临 牛图库特效。 </div>
3.
<html xmlns="http://www.w3.org/1999/xhtml"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.webjx.com</title> <script language="javascript"> function tablecollapse() { /* 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 30em; } 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>这个</caption> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tfoot> <tr> <th>结尾1</th> <td colspan="2">结尾2</td> </tr> </tfoot> <tbody> <tr> <th>值1</th> <td>值2</td> <td>值3</td> </tr> <tr class="odd"> <th>值4</th> <td>值5</td> <td>值6</td> </tr> <tr> <th>值7</th> <td>值8</td> <td>值9</td> </tr> <tr class="odd"> <th>值10</th> <td>值11</td> <td>值12</td> </tr> <tr> <th>值13</th> <td>值14</td> <td>值15</td> </tr> </tbody> </table> </body> </html>
相关推荐
下载文件中:JSEnhancements.vsix 支持vs2010;JSOutlining.vsix支持vs2013。 解压安装后,重新启动vs按照示例文件使用就可以。
javascript 实现table展开折叠,table的th部分不变,下端的tr折叠
提供关于typescript/node.js/javascript/css/html语言的代码参考
SDMenu 用在网站后台比较合适的折叠菜单,操作舒适,是一个成形的作品,一般情况下,这种菜单都是在网页的左侧或右侧中,平时是合拢的,鼠标点击主菜单后会展开对应菜单项,节省网页空间,也是很流行的一种菜单风格...
在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所...
本文实例讲述了js实现可折叠...这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢。 运行效果截图如下: 在线演示地址如下: ...
基于网上的JavaScript代码和标准AES算法改进,可实现JavaScript和Java的AES/128/192/256位加密解密互操作。
腾讯QQ在线客服代码,可展开折叠关闭javascript
js代码高亮显示 JavaScript代码高亮 jsp js代码高亮显示 JavaScript代码高亮 jsp
<script type="text/javascript" src=...<script type="text/javascript" src="/js/echarts/js/echarts.min.js"></script> <script type="text/javascript" src="/js/echarts/js/bmap.min.js"></script>
javascript代码折叠工具vs2010插件. Artem.VisualStudio.Outlining.vsix
base62.js, node.js的javascript Base62编码/解码器 Base62.js JavaScript Base62编码/解码器什么是Base62编码?Base62编码将数字转换为ASCII字符串( 0 -9,一个z 和一个z ),反之亦然,这通常会导致比较短的字符串...
一、开源项目 Javascript .NET ...示例代码: 代码如下:using Noesis.Javascript; using System; using System.Collections.Generic; namespace JsCSharp { class Program { static void Main(string
javascript特效代码大全 javascript特效代码大全 javascript特效代码大全
javascript代码折叠插件 vs插件
一个JavaScript的折叠菜单 的例子,点击菜单后展开,再次点击后收缩
AES/CBC/PKCS5Padding,加密解决 支持javascript、java、iOS
JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象...
JavaScript 小游戏代码汇总
javascript 多层嵌套的一个层展开、收缩实例! javascript 多层嵌套的一个层展开、收缩实例!