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极简入门教程（三）：数组
这篇文章主要介绍了JavaScript极简入门教程（二）：数组,本文主要讲解了数组的创建和length属性的介绍,其它方法属性都没有介绍,需要的朋友可以参考下
2014-10-10
[JS]点出统计器
[JS]点出统计器...
2006-07-07
javaScript(JS)替换节点实现思路介绍
获取要替换的节点,这种方法只适用于IE浏览器以及适用于各种浏览器的写法，感兴趣的朋友可以参考下哈
2013-04-04
图片该如何优化来提高网站性能
这篇文章主要介绍了图片该如何优化来提高网站性能，对网站性能感兴趣的同学，可以参考下
2021-05-05
微信小程序图片左右摆动效果详解
这篇文章主要介绍了微信小程序图片左右摆动效果详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
JS利用Canvas实现文字水印和图片水印合成
这篇文章主要为大家详细介绍了JavaScript如何利用Canvas实现文字水印和图片水印合成的效果，文中的示例代码讲解详细，需要的小伙伴可以参考一下
2022-11-11
axios POST提交数据的三种请求方式写法示例
这篇文章主要介绍了axios POST提交数据的三种请求方式写法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
深入了解javascript 数组的sort方法
在javascript中，数组对象有一个有趣的方法sort，它接收一个类型为函数的参数作为排序的依据。这意味着开发者只需要关注如何比较两个值的大小，而不用管排序这件事内部是如何实现的
2018-06-06
JavaScript懒加载与预加载原理与实现详解
这篇文章主要介绍了JavaScript懒加载与预加载，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-09-09
JavaScript实现网页版简易计算器功能
这篇文章主要介绍了JavaScript实现网页版简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07