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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用js实现的一个根据内容自动生成表格的函数

Javascript: javascript中的有名函数和无名函数; javascript[js]获取url参数的代码; javascript select 之间传值效果的代码; js正则实现的密码框简单制作,还可以替换成自己想用得符号; 脚本控制自适应高度的缩短问题; 兼容ie和firefox版本的js反选全选多选框; javascript 随机数与高级应用附vbscript(asp) 随机数总结; 不用确认即可打印的javascript代码; 推荐自用 Javascript 缩图函数 (onDOMLoaded)……; 用javascript实现div可编辑的常见方法; 用JavaScript实现的一个IP地址输入框; 用javascript取得传递参数的个数的代码; 当鼠标移出灰色区域时候,菜单项怎么隐藏起来; 才发现的超链接js导致网页中GIF动画停止的解决方法; javascript window.onerror事件学习新收获; javascript 如何生成不重复的随机数; 超个性的导航效果; 不能再简单的无闪刷新验证码原理很简单; 经常用到的javascript验证函数收集; 用js实现手把手教你月入万刀(转贴)

No. « ‹ 85 86 87 88 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 57 ::

收藏到网摘: n/a

javascript 一个自定义长度的文本自动换行的函数图片格式的JavaScript和CSS速查手册

晚上突然看到以前做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]:" ")+"</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 全选提示:你可先修改部分代码,再按运行]

javascript 一个自定义长度的文本自动换行的函数图片格式的JavaScript和CSS速查手册

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

评论 (0) All

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