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;i5){
for(var m=0;mminNumber+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";
}
}
}

col1 col2 col3 col4 col5 col6 col7 col8 col9 col10

tableOnLoad();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 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;i5){ for(var m=0;mmi

  • javascript表格隔行变色加鼠标移入移出及点击效果的方法

    本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项.   说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1;  为了实现

  • JavaScript表格常用操作方法汇总

    本文实例汇总了JavaScript表格常用操作方法.分享给大家供大家参考.具体如下: <!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" > <

  • JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了很多的代码量,而且学习也不是很高.接下来给大家分享两个小的特效,表格隔行变色和Tab标签页,大家来体会一下. 表格隔行变色 效果图: 原生Js实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta c

  • Javascript表格翻页效果的具体实现

    表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页---www.jb51.net</TITLE> <style> body, td{ font-size: 9pt; } a:link {

  • Javascript表格翻页效果实现思路及代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页</TITLE> <style> body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover

  • Auntion-TableSort国人写的一个javascript表格排序的东西

    Auntion-TableSort最新版 修复了一个数字排序的问题.放出下载 07年5月5日 Auntion TableSort 测试交流第一版 (下一版将会存在部分表格相关特效) ----------------------------------------------------------------------------- 作者:Auntion blog:Auntion.blogbus.com e-mail:Auntion@Gmail.com QQ:82874972 --------

  • javascript表格控件：Chgrid，简化型

    本着自由共享的精神,把代码帖出来,同时大家也可以一起来测试以及添加新功能,请大家根据网友提出的问题,把自己修改好的版本都帖出来跟在下面,最后作为一款比较全面的表格软件. Chgrid的简单功能介绍: 1:支持自定义排序 2:支持列宽度的拖放 3:支持自定义函数 4:支持分页 5:支持自动编号 6:多浏览器支持,支持ie6,ie7,ff,opera 7:div布局 已知问题: 1:由于使用的div布局,如果使用margin或者padding会改变定义的列宽度,所以目前文字只能居中或者靠左或靠右,不

  • 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现

    第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持IE6.IE7.FF2,其他浏览器未测试(可以扩展一下用到ASP.NET的GridView里): 鼠标划过表格行变色-简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;paddin

  • javascript表格随机排序代码

    表格随机排序练习 by 阿会楠 #main{ width:700px; } #main div{ width:200px; margin-left:10px; margin-top:20px; float:left; } div table{ width:100%; } function arrRand(obj){ var a = new Array(); for(var i = 0;i A B C D E F 我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

随机推荐