用js實(shí)現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)

更新時間：2007年08月19日 12:39:01 作者：

晚上突然看到以前做asp時寫的一個根據(jù)數(shù)據(jù)庫數(shù)據(jù)自動生成表格的程序。
要求是：
1，對于空內(nèi)容，應(yīng)該寫為"<td> </td>",否則在ie會顯示的很變態(tài)（ie當(dāng)作該單元格不存在）。
2，當(dāng)輸出數(shù)據(jù)條數(shù)不等于表格的“長X寬”時，用"<td> </td>"自動填補(bǔ)最后一行空余的地方。

其實(shí)也很簡單，當(dāng)時做asp時用了一個較復(fù)雜的算法（下面代碼中MakeTable2），今天又想到一個更容易理解的算法（MakeTable1）,今天用js實(shí)現(xiàn)了下，不過郁悶的是感覺效率上都一樣，這樣還是用第一個比較好（容易理解，代碼少）。
代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     <html xmlns="http://www.w3.org/1999/xhtml">         <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>Untitled 1</title>     <style type="text/css">     .style1 {         font-size: x-small;     }     </style>     </head>         <body>     <span id="rdk2yhi"    class="style1">     <script type="text/javascript">     /*        函數(shù)作用：根據(jù)數(shù)組內(nèi)容自動調(diào)整表格大小,對于空內(nèi)容寫入占位符，對于最后不足整行的用空單元格補(bǔ)足。        函數(shù)思路：首先計算數(shù)組長度，并根據(jù)要顯示列數(shù)計算實(shí)際需要行數(shù)，然后循環(huán)輸出行列并根據(jù)索引輸出數(shù)組元素，                 如果當(dāng)前數(shù)組索引不小于數(shù)組長度或當(dāng)前數(shù)組值為空則寫入占位符單元格。    */    function makeTable1(cols,a){    //cols為列數(shù)，a應(yīng)該是一個用逗號分開的字符串         //alert(a.split(',').length);         var t1=new Date().getTime();         a=a.split(',');    //顯式轉(zhuǎn)換為數(shù)組,否則ie不能識別為數(shù)組         var l=a.length;    //得到數(shù)組的長度         var rows=parseInt(l/cols)+(l%cols==0?0:1);    //計算出行數(shù)                  var outStr="<table border=\"1\" align=\"center\">";         for(var i=0;i<rows;i++){             outStr+="<tr>";             for(var j=0;j<cols;j++){                 var temp=cols*i+j;    //計算當(dāng)前索引                 outStr+=("<td width=\"80\" align=\"center\" height=\"80\">"+( (temp<l&&a[temp]!='') ? a[temp]:"&nbsp;")+"</td>");             }             outStr+="</tr>"        }         outStr+="</table>";         document.write(outStr+"</br><center>執(zhí)行時間："+(new Date().getTime()-t1)+"</center></br>");         //alert(rows);     }     /*        函數(shù)作用：同上        函數(shù)思路：計算數(shù)組長度，然后根據(jù)長度循環(huán)輸出元素值，如果當(dāng)前循環(huán)變量值是列數(shù)的整數(shù)倍（余數(shù)為0），                 則輸出行結(jié)束標(biāo)記。否則輸出列信息。然后計算當(dāng)前循環(huán)變量值是否是列數(shù)的整數(shù)倍，如果不是，利用循環(huán)補(bǔ)足。直至補(bǔ)齊。    */    function makeTable2(cols,a){         var t2=new Date().getTime();         a=a.split(',');         var l=a.length;         var outStr="<table border=\"1\" align=\"center\">";         for(var i=0;i<l;i++){             var temp=(i+1)%cols;             if(i==0||temp==1){                 outStr+="<tr>";             }                          outStr+=("<td width=\"80\" height=\"80\" align=\"center\">"+a[i]+"</td>");                          if(temp==0){                 outStr+="</tr>";             }         }                  var x=i%cols;         if(x!=0){             for(var i=0;i<(cols-x);i++){                 outStr+="<td>&nbsp;</td>";             }             outStr+="</tr>"        }         outStr+="</table>"        document.write(outStr+"</br><center>執(zhí)行時間："+(new Date().getTime()-t2)+"</center></br>");     }     var str="a,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s";     str+=str;     str+=str;     makeTable1(5,str);     makeTable2(5,str);     </script>     </span>     </body>         </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: