作者：hutia 時間： 2006-01-17 文檔類型：原創(chuàng) 來自：藍色理想
其實這個東西沒什么技術(shù)含量，就是給大家提供一個給表格加滾動條的思路。
運行代碼框<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"]); //參數(shù)說明:createTable(strCaption,colHeads) //strCaption 標(biāo)題 //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){ //參數(shù)說明:colHeads 是一個array,每個item的格式是 名稱:寬度 的字符串 //生成表格 oTable=document.createElement("table"); document.body.insertBefore(oTable); //設(shè)置class oTable.className="table0"; with(oTable.style){ tableLayout="fixed"; borderCollapse="collapse" borderSpacing="0px"; } //設(shè)置變量 oTCaption=oTable.createCaption(); oTHead=oTable.createTHead(); oTFoot=oTable.createTFoot(); //生成標(biāo)題 oTCaption.innerText=strCaption; //設(shè)置列寬 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);} //設(shè)置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 全部選擇 提示：你可先修改部分代碼，再按運行]
出處：藍色理想 責(zé)任編輯：moby
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
藍色理想版權(quán)申明：除部分特別聲明不要轉(zhuǎn)載，或者授權(quán)我站獨家播發(fā)的文章外，大家可以自由轉(zhuǎn)載我站點的原創(chuàng)文章，但原作者和來自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來自一節(jié)，自行鏈接）。文章版權(quán)歸我站和作者共有。
轉(zhuǎn)載要求：轉(zhuǎn)載之圖片、文件，鏈接請不要盜鏈到本站，且不準(zhǔn)打上各自站點的水印，亦不能抹去我站點水印。
特別注意：本站所提供的攝影照片，插畫，設(shè)計作品，如需使用，請與原作者聯(lián)系，版權(quán)歸原作者所有，文章若有侵犯作者版權(quán)，請與我們聯(lián)系，我們將立即刪除修改。
<dfn id="6k8ww"></dfn>
<noframes id="6k8ww"></noframes>
