javascript 表格左右收缩

更新时间：2009年07月12日 23:32:16 作者：

javascript 表格左右收缩实现代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 左右收缩表格 </TITLE> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script language="JavaScript" type="text/javascript"> function tableOnLoad() { var tableObj=document.getElementById("testTable"); var colNumber=tableObj.rows.item(0).cells.length; var colObjs=tableObj.getElementsByTagName("td"); if(colNumber>5) { for(var i=5;i<colObjs.length;i++) { colObjs(i).style.display="none"; } } } function tableLeftRetract() { var tableObj=document.getElementById("testTable"); var colNumber=tableObj.rows.item(0).cells.length; var colObjs=tableObj.getElementsByTagName("td"); //minNumber of column of which display style is none var minNumber=0; for(var i=0;i<colNumber;i++) { if(colObjs(i).style.display!="none") { minNumber=i; break; } } if(minNumber<=colNumber-1-5 && colNumber>5){ for(var m=0;m<=minNumber;m++) { colObjs(m).style.display="none"; } for(var n=minNumber+1;n<minNumber+1+5;n++) { colObjs(n).style.display=""; } for(var j=colNumber-1;j>minNumber+5;j--) { colObjs(j).style.display="none"; } } } function tableRightRetract() { var tableObj=document.getElementById("testTable"); var colNumber=tableObj.rows.item(0).cells.length; var colObjs=tableObj.getElementsByTagName("td"); //minNumber of column of which display style is none var maxNumber=colNumber-1; for(var i=colNumber-1;i>=0;i--) { if(colObjs(i).style.display!="none") { maxNumber=i; break; } } if(maxNumber>=5 && colNumber>5){ for(var m=colNumber-1;m>=maxNumber;m--) { colObjs(m).style.display="none"; } for(var n=maxNumber-1;n>maxNumber-1-5;n--) { colObjs(n).style.display=""; } for(var j=maxNumber-1-5-1;j>=0;j--) { colObjs(j).style.display="none"; } } } </script> </head> <body> <table> <tr> <td><img src="left.jpeg" onClick="tableLeftRetract();"/></td> <td> <table id="testTable"> <tr> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>col5</td> <td>col6</td> <td>col7</td> <td>col8</td> <td>col9</td> <td>col10</td> </tr> </table> </td> <td><img src="right.jpeg" onClick="tableRightRetract();"/></td> </tr> </table> <script>tableOnLoad();</script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

JavaScript 图片放大镜（可拖放、缩放效果）
背景：很久之前就在marry5.com看到这个效果，当时觉得很神奇，碍于水平有限，没做出来。
2008-09-09
js实现宇宙星空背景效果的方法
这篇文章主要介绍了js实现宇宙星空背景效果的方法,实例分析了javascript中动画效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
JS实现的冒泡排序，快速排序，插入排序算法示例
这篇文章主要介绍了JS实现的冒泡排序，快速排序，插入排序算法,结合实例形式分析了javascript冒泡排序，快速排序，插入排序算法的相关原理及实现方法,需要的朋友可以参考下
2019-03-03
JavaScript中的普通函数与构造函数比较
这篇文章主要介绍了JavaScript中的普通函数与构造函数比较,需要的朋友可以参考下
2015-04-04
Bootstrap中表单控件状态(验证状态)
这篇文章主要介绍了Bootstrap中表单控件状态(验证状态) 的相关资料,还给大家介绍了在Bootstrap框架中提供的机制验证效果，非常不错，需要的朋友可以参考下
2016-08-08
js相册效果代码(点击创建即可)
利用js 书写的相册代码，点击创建即可看到效果，感兴趣的朋友可以参考下哈，希望对你学习jquery有所帮助
2013-04-04
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
mouseover ,mouseout ,mouseenter,mouseleave，都是鼠标点击而触发的事件，各自代表什么意思，有哪些区别呢？下面跟着脚本之家小编一起看看吧
2015-10-10
百度移动版的url编码解码示例
这篇文章主要介绍了百度移动版的url编码解码的具体实现,需要的朋友可以参考下
2014-04-04
非主流的textarea自增长实现js代码
今天稍微研究了下textarea随输入内容自动增长的功能，通过google参考了一些实现方式
2011-12-12
小程序卡片切换效果组件wxCardSwiper的实现
这篇文章主要介绍了小程序卡片切换效果组件wxCardSwiper的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02

javascript 表格左右收缩

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具