给表格加滚动条的思路

最新推荐文章于 2022-09-27 15:35:45 发布
iteye_9193
最新推荐文章于 2022-09-27 15:35:45 发布
阅读量132
点赞数
分类专栏： javascript特效文章标签： J#
javascript特效专栏收录该内容
14 篇文章
订阅专栏
<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.οnmοuseοver=rowOnMouseOver;
	theRow.οnmοuseοut=rowOnMouseOut;
	theRow.οnclick=rowOnClick;
	for(var i=0;i<colHeads.length;i++){
		theCell=theRow.insertCell();
		theCell.tabIndex=0;
		theCell.hideFocus=true;
		theCell.colIndex=i;
		theCell.οnmοuseοver=function(){this.focus();};
		theCell.οnmοuseοut=cellOnBlur;
		theCell.οnfοcus=cellOnFocus;
		theCell.οnblur=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 οnlοad="init();">

</body>
</html>