首页>>网页特效>>浏览器特效类>>正文：给表格加滚动条

正文

给表格加滚动条

www.7dspace.com 更新日期：2006-1-18 3:47:36 七度空间

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

运行代码框

有什么问题请到<a href='http://bbs.7dspace.com/index.asp?boardid=2'>论坛</a>中发表<br>

<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);
 //设置class
 oTable.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);}
 
 //设置class
 oTBody.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>

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

上一篇：静态网页加密
下一篇：Web技术：易趣 vs 淘宝

标题：给表格加滚动条作者：hutia 来源：蓝色理想

【收藏此页】【打印】【关闭】

站内搜索

热点导读

特别推荐