脚本语言

给表格加滚动条

编辑:dnawo 日期:2007-08-01

字体大小: 小中大

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

HTML代码

<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 全部选择提示：你可先修改部分代码，再按运行]

上一篇: 如何生成XML数据

下一篇: 给DIV加滚动条

文章来自: hutia

引用通告: 查看所有引用 | 我要引用此文章

Tags:

最新日志:

评论: 0 | 引用: 0 | 查看次数: 4452

发表评论

请登录后再发表评论！

Powered By PJBlog3 V3.2.9.518 CopyRight 2005 - 2021, 木子屋 xhtml | css
Processed in 0.546875 second(s) , 6 queries , Simple Yellow Design By ChangHua(FatMouse) 闽ICP备19016051号-1