用js實現的一個根據內容自動生成表格的函數

2019-11-21 01:57:33

字體：大中小

來源：轉載

供稿：網友

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

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

<!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="iwvjtn8m0"    class="style1">     <script type="text/javascript">     /*        函數作用：根據數組內容自動調整表格大小,對于空內容寫入占位符，對于最后不足整行的用空單元格補足。        函數思路：首先計算數組長度，并根據要顯示列數計算實際需要行數，然后循環輸出行列并根據索引輸出數組元素，                 如果當前數組索引不小于數組長度或當前數組值為空則寫入占位符單元格。    */    function makeTable1(cols,a){    //cols為列數，a應該是一個用逗號分開的字符串         //alert(a.split(',').length);         var t1=new Date().getTime();         a=a.split(',');    //顯式轉換為數組,否則ie不能識別為數組         var l=a.length;    //得到數組的長度         var rows=parseInt(l/cols)+(l%cols==0?0:1);    //計算出行數                  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;    //計算當前索引                 outStr+=("<td width=/"80/" align=/"center/" height=/"80/">"+( (temp<l&&a[temp]!='') ? a[temp]:" ")+"</td>");             }             outStr+="</tr>"        }         outStr+="</table>";         document.write(outStr+"</br><center>執行時間："+(new Date().getTime()-t1)+"</center></br>");         //alert(rows);     }     /*        函數作用：同上        函數思路：計算數組長度，然后根據長度循環輸出元素值，如果當前循環變量值是列數的整數倍（余數為0），                 則輸出行結束標記。否則輸出列信息。然后計算當前循環變量值是否是列數的整數倍，如果不是，利用循環補足。直至補齊。    */    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> </td>";             }             outStr+="</tr>"        }         outStr+="</table>"        document.write(outStr+"</br><center>執行時間："+(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需刷新才能執行]

上一篇：js下在password表單內顯示提示信息的解決辦法

下一篇：javascript 一個自定義長度的文本自動換行的函數