js基础:学习网页制作技巧:给表格加滚动条


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

  运行代码框

<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";
}</p>欢迎光临<strong><font color="#CC0000">学网</font></strong>,<strong><font color="#CC0000" target=_blank>收藏本篇文章</font></strong> [1] [2] [3]<p> </p>$False{GetProperty(Content)}lt;p> </p><p>
//设置变量
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;
}欢迎光临<strong><font color="#CC0000">学网</font></strong>,<strong><font color="#CC0000">点击这里</font></strong>查看更多文章教程 [1] [2] [3]<p> </p><p>
   <p>
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>



相关阅读:
使用ADO.NET2.0提升数据交互性能(3)
Javascript打印网页部分内容的脚本
oracle中有关网络配置的介绍
mysql 教程 存储过程
PHP中strtok()函数的优点详细解析
JSP由浅入深(9)—— JSP Sessions
SQL 中sp_executesql存储过程的使用帮助
一份ASP内存的释放的实验报告
Asp.net中用核选框显示数据的方法及ButtonColumn的使用方法
实例讲解Oracle数据库设置默认表空间问题
再论Javascript的类继承
Fastest way to build an HTML string(拼装html字符串的最快方法)
关闭Linux下不必要的系统服务以加快速度
做个DataList 可分页的数据源
快速导航

Copyright © 2016 phpStudy |