用javascript给表格加滚动条

作者：hutia 来源：蓝色理想时间：2008-10-15 10:03:00　

其实这个东西没什么技术含量，就是给大家提供一个给表格加滚动条的思路。

运行代码框

<html><head><title>My table</title><style>.table0 {height:90％;}.table0 caption{width:100％;height:26px;line-height:26px;font-size:20px;font-color:black;font-weight:900;letter-spacing:5px;}.table0 thead td {text-align:center;vertical-align:middle;height:20px;line-height:18px;font-size:14px;font-color:black;font-weight:bold;padding-top:2px;padding-bottom:2px;border:#555 1px solid;margin:0px;}.table0 tfoot td{text-align:left;vertical-align:middle;height:20px;line-height:18px;font-size:12px;font-color:black;font-weight:bold;padding-top:2px;padding-bottom:2px;padding-left:12px;padding-right:12px;border:#555 1px solid;}.table0 tbody td {width:100％;height:auto;border:#555 1px solid;padding:0px;margin:0px;}.table1 tbody td {text-align:left;vertical-align:middle;height:20px;line-height:18px;font-size:14px;font-color:#444;font-weight:normal;padding-top:2px;padding-bottom:2px;padding-left:12px;padding-right:12px;border-right:#555 1px solid;border-bottom:#555 1px solid;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;word-wrap:normal;}</style><script>function init(){theT=createTable("我的收藏夹",["Group:150","Name:300","URL:200","Visited:100","Modify:100","Delete:100"]);//参数说明:createTable(strCaption,colHeads)//strCaption 标题//colHeads 是一个array,每个item的格式是名称:宽度的字符串for(var i=0;i<40;i++){theR=theT.insertRow();for(var j=0;j<7;j++){theC=theR.insertCell();theC.innerText=j;}}}function createTable(strCaption,colHeads){//参数说明:colHeads 是一个array,每个item的格式是名称:宽度的字符串//生成表格oTable=document.createElement("table");document.body.insertBefore(oTable);//设置classoTable.className="table0";with(oTable.style){tableLayout="fixed";borderCollapse="collapse"borderSpacing="0px";}//设置变量oTCaption=oTable.createCaption();oTHead=oTable.createTHead();oTFoot=oTable.createTFoot();//生成标题oTCaption.innerText=strCaption;//设置列宽oTHead.insertRow();for(var i=0;i<colHeads.length;i++){tHeadName=colHeads[i].split(":")[0];tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1]);theCell=oTHead.rows[0].insertCell();theCell.style.width=tHeadWidth;}theCell=oTHead.rows[0].insertCell();theCell.width=20;oTHead.rows[0].style.display="none";//生成表头oTHead.insertRow();for(var i=0;i<colHeads.length;i++){tHeadName=colHeads[i].split(":")[0];tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1]);theCell=oTHead.rows[1].insertCell();theCell.innerText=tHeadName;theCell.style.width=tHeadWidth;}theCell=oTHead.rows[1].insertCell();theCell.width=24;//生成表脚oTFoot.insertRow();theCell=oTFoot.rows[0].insertCell();theCell.innerHTML="<marquee scrollDelay=50 scrollAmount=2>Copy rights 2005. Hutia presents.</marquee>";theCell=oTFoot.rows[0].insertCell();theCell.colSpan=colHeads.length-1;theCell=oTFoot.rows[0].insertCell();theCell.width=20;//生成主体oTable.all.tags("Tbody")[0].insertRow();theCell=oTable.all.tags("Tbody")[0].rows[0].insertCell();theCell.colSpan=colHeads.length+1;oMain=document.createElement("DIV");theCell.insertBefore(oMain);with(oMain.style){width="100％";height="100％";overflowY="auto";overflowX="hidden";margin="0px";marginLeft="-1px";}oTBody=document.createElement("table");oMain.insertBefore(oTBody);oTable.oTBody=oTBody;//禁止选择oTCaption.onselectstart=oTHead.onselectstart=oTFoot.onselectstart=function(){return(false);}//设置classoTBody.className="table1";with(oTBody.style){width=oTable.offsetWidth-15;tableLayout="fixed";borderCollapse="collapse"borderSpacing="0px";padding="0px";margin="0px";}//初始化列宽oTBody.insertRow();for(var i=0;i<colHeads.length;i++){tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1]);theCell=oTBody.rows[0].insertCell();theCell.style.width=tHeadWidth;}oTBody.rows[0].style.display="none";return(oTBody);}function insertRow(){var intL=oTBody.rows.length;theRow=oTBody.insertRow();theRow.index=intL;theRow.onmouseover=rowOnMouseOver;theRow.onmouseout=rowOnMouseOut;theRow.onclick=rowOnClick;for(var i=0;i<colHeads.length;i++){theCell=theRow.insertCell();theCell.tabIndex=0;theCell.hideFocus=true;theCell.colIndex=i;theCell.onmouseover=function(){this.focus();};theCell.onmouseout=cellOnBlur;theCell.onfocus=cellOnFocus;theCell.onblur=cellOnBlur;}theRow.cells[0].innerText=strGroup?strGroup:"ROOT";theRow.cells[1].innerText=strName?strName:"Untitled Document.";theRow.cells[2].innerText=strURL?strURL:"Unspecified URL";theRow.cells[3].innerHTML=strVisited?"Yes".fontcolor("red"):"Unknow";theRow.cells[4].innerHTML=strModify?"Yes".fontcolor("red"):"No".fontcolor("Green");theRow.cells[5].innerHTML="Delete".fontcolor("red");}</script></head><body onload="init();"></body></html>

标签：表格,滚动条

投稿

用javascript给表格加滚动条

猜你喜欢

ASP实现最简洁的多重查询的解决方案

两行 JavaScript 代码

德国ebay购头记

ORACLE常用数值函数、转换函数、字符串函数

asp如何用Jmail组件的发送电子邮件？

通过屏蔽IP来防止采集

带你轻松接触 MySQL中损坏的MyISAM表

MySQL数据库在Linux下二进制日志恢复方法

安装MySQL5.0后出现1607异常的解决办法

高效地获取XMLhttp对象

javascript用回车键实现Tab键功能

ASP六大对象介绍

Silverlight与Flash的技术比较

asp如何调用DLL来加快服务器的执行速度？

ajax框架:ExtJs简介

豆瓣可以做而且值得做的几件事情

ASP从数据库中获取下载文件

JS完美实现对象克隆

20个优秀网站助你征服CSS[译]

图片放大镜，多图片放大（已更新）[可调整倍数、区域大小、展示区域位置]