代码：
<
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
>
<
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 table操作--------table滚动条
，如需转载请自行联系原博主。
