javascript 表格左右收缩- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 表格左右收缩

Javascript: QQ邮箱的一个文本编辑器代码; Z-Blog中用到的js代码; 绝对经典的滑轮新闻显示(javascript+css)实现; 用js实现的仿sohu博客更换页面风格（简单版）; 仿Vista进程条效果; 用Javascript判断图片是否存在，不存在则显示默认图片的代码; 用JQuery 实现的自定义对话框; jQuery使用手册之三 CSS操作; 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树; 贴图转换+转贴工具用到的js代码超级推荐; 超级简单的图片防盗(HTML),好用; 现代 javscript 编程资料; 超级可爱纯js网页时钟; Dojo之路:如何利用Dojo实现Drag and Drop效果; AJAX架构之Dojo篇; 发两个小东西，ASP/PHP 学习工具。用JavaScript写的; 使用prototype.js 的时候应该特别注意的几个问题.; 一个已封装好的漂亮进度条; 漂亮的widgets，支持换肤和后期开发新皮肤; 用javascript实现的仿Flash广告图片轮换效果

No. « ‹ 203 204 205 206 › »

技术文章搜索

关键字

Javascript 中的 javascript 表格左右收缩

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 99 ::

收藏到网摘: n/a

javascript 动态加载 css 方法总结 jqurey 学习笔记传智博客佟老师附详细注释

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" /></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" /></td>
</tr>
</table>
<script>tableOnLoad();</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript 动态加载 css 方法总结 jqurey 学习笔记传智博客佟老师附详细注释

Javascript 中的 javascript 表格左右收缩

评论 (0) All