用js实现的一个根据内容自动生成表格的函数

更新时间：2007年08月19日 12:39:01 作者：

晚上突然看到以前做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 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]:"&nbsp;")+"</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>&nbsp;</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实现的一个根据内容自动生成表格的函数

JS使用setInterval计时器实现挑战10秒
这篇文章主要为大家详细介绍了JS使用setInterval计时器实现挑战10秒，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
vue渲染大量数据时卡顿卡死解决方法
这篇文章主要介绍了vue渲染大量数据时发生卡顿卡死问题时的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
js实现扫雷源代码
这篇文章主要为大家详细介绍了js实现扫雷源代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JavaScript评论点赞功能的实现方法
通过分析评论功能的逻辑关系，学会如何使用JavaScript实现评论、回复、点赞等各种功能。这篇文章主要介绍了JavaScript评论点赞功能的实现方法,需要的朋友可以参考下
2017-03-03
代码精简的可以实现元素圆角的js函数
代码精简的可以实现元素圆角的js函数...
2007-07-07
GoJs中使用HTML方法示例
这篇文章主要为大家介绍了GoJs中使用HTML方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
KnockoutJS是一个JavaScript实现的MVVM框架。通过本文给大家介绍BootstrapTable与KnockoutJS相结合实现增删改查功能【一】，感兴趣的朋友一起学习吧
2016-05-05
parseInt parseFloat js字符串转换数字
转换函数、强制类型转换、利用js变量弱类型转换。
2010-08-08
Javascript Web Worker使用过程解析
这篇文章主要介绍了Javascript Web Worker使用过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-03-03
xml文档转换工具，附图表例子(hta)
xml文档转换程序的一个小应用，几行代码生成饼图。源代码打包提供。
2010-11-11

用js实现的一个根据内容自动生成表格的函数

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具