首頁 > 建站 > 前端技術

js 給table增加下拉捲軸

來源：互聯網
上載者：User
關鍵字 網頁製作 Ajax JavaScript
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
node js table node js express js include js in js import js to js js include js js fundamentals w3 js
相關文章
輸入框自動適應寬度
讓IE支援CSS3圓角的方法
css position用法與導致頁面變形js處理方法
CSS實現的透明效果
IE8中text-align:center偏左的解決辦法
DIV+CSS還能走多遠

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More