教程集 > 脚本编程 > javascript > 正文 js 给table增加下拉滚动条

js 给table增加下拉滚动条

发布时间：2023-05-30 编辑：jiaochengji.com

教程集为您提供js 给table增加下拉滚动条等资源，欢迎您收藏本站，我们将为您提供最新的js 给table增加下拉滚动条资源

提示：您可以先修改部分代码再运行

<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>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：

上一篇：js超漂亮弹出层，带阴影效果下一篇：js 可拖动弹出层效果

[关闭]

js 给table增加下拉滚动条

最近更新

浏览排行