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

晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序。
要求是:
1,对于空内容,应该写为"<td> </td>",否则在ie会显示的很变态(ie当作该单元格不存在)。
2,当输出数据条数不等于表格的“长X宽”时,用"<td> </td>"自动填补最后一行空余的地方。

其实也很简单,当时做asp时用了一个较复杂的算法(下面代码中MakeTable2),今天又想到一个更容易理解的算法(MakeTable1),今天用js实现了下,不过郁闷的是感觉效率上都一样,这样还是用第一个比较好(容易理解,代码少)。
代码如下:

Untitled 1

.style1 {
font-size: x-small;
}

/*
函数作用:根据数组内容自动调整表格大小,对于空内容写入占位符,对于最后不足整行的用空单元格补足。
函数思路:首先计算数组长度,并根据要显示列数计算实际需要行数,然后循环输出行列并根据索引输出数组元素,
如果当前数组索引不小于数组长度或当前数组值为空则写入占位符单元格。
*/
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="

";
for(var i=0;i";
for(var j=0;j"+( (temp");
}
outStr+="

"
}
outStr+="

";
document.write(outStr+"
执行时间:"+(new Date().getTime()-t1)+"
");
//alert(rows);
}
/*
函数作用:同上
函数思路:计算数组长度,然后根据长度循环输出元素值,如果当前循环变量值是列数的整数倍(余数为0),
则输出行结束标记。否则输出列信息。然后计算当前循环变量值是否是列数的整数倍,如果不是,利用循环补足。直至补齐。
*/
function makeTable2(cols,a){
var t2=new Date().getTime();
a=a.split(',');
var l=a.length;
var outStr="

";
for(var i=0;i";
}

outStr+=("

");

if(temp==0){
outStr+="

";
}
}

var x=i%cols;
if(x!=0){
for(var i=0;i 

";
}
outStr+="

"
}
outStr+="

"+a[i]+"

"
document.write(outStr+"
执行时间:"+(new Date().getTime()-t2)+"
");
}
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);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • HTML 自动伸缩的表格Table js实现

    下面的代码解决了这个问题:当表格被载入的时候,TD的宽度是原定的长度,不会撑开TD,也不会影响其他TD,点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高.用户体验很好.[优点] 1.对开发人员指定的表格没有任何影响: 2.使用简单: 3.被定义的表格样式可以随意的定制你的样式,不对你的样式构成影响: 4.移植性好,扩展性好. [缺点] 目前用IE7测试正常,但不支持FireFox,工作比较忙,没时间更正,希望网友更正,俺在此谢过.^_^ [使用方法] 1.将AutoTableSize

  • JS实现网页表格自动变大缩小的方法

    本文实例讲述了JS实现网页表格自动变大缩小的方法.分享给大家供大家参考.具体分析如下: 这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化 主要就是一个强调显示的作用 复制代码 代码如下: <HTML> <HEAD> <TITLE>js会动的表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-Type>

  • 用js+xml自动生成表格的东西

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <script language="javascript"> function loadXML(handler) {     var url = &

  • 基于JavaScript代码实现自动生成表格

    废话不多说,直接给大家贴js代码了,具体代码如下所示: //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"

  • JavaScript实现自动变换表格边框颜色

    代码如下,保存到HTML文件也可以查看效果: <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码</title> </head> <body> <table border="0" width="261" id="change_jb51_net" style="border

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

    晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序. 要求是: 1,对于空内容,应该写为"<td> </td>",否则在ie会显示的很变态(ie当作该单元格不存在). 2,当输出数据条数不等于表格的"长X宽"时,用"<td> </td>"自动填补最后一行空余的地方. 其实也很简单,当时做asp时用了一个较复杂的算法(下面代码中MakeTable2),今天又想到一个更容易理解的算法(M

  • python根据文章标题内容自动生成摘要的实例

    text.py title = '智能金融起锚:文因.数库.通联瞄准的kensho革命' text = '''2015年9月13日,39岁的鲍捷乘上从硅谷至北京的飞机,开启了他心中的金融梦想. 鲍捷,人工智能博士后,如今他是文因互联公司创始人兼CEO.和鲍捷一样,越来越多的硅谷以及华尔街的金融和科技人才已经踏上了归国创业征程. 在硅谷和华尔街,已涌现出Alphasense.Kensho等智能金融公司. 如今,这些公司已经成长为独角兽. 大数据.算法驱动的人工智能已经进入到金融领域.人工智能有望在

  • js简单实现自动生成表格功能示例

    本文实例讲述了js简单实现自动生成表格功能.分享给大家供大家参考,具体如下: JS实现自动生成表格 由于自己的算法8太行,所以只能尽量用简单点的方法实现效果 下面直接上代码 <table id="table"> <thead> <td>姓名</td> <td>年龄</td> <td>身高</td> </thead> <tbody></tbody> <

  • JS实现读取Excel文件内容并生成二维码

    目录 需求 实现方案 puppeteer node-canvas 浏览器 问题分解 具体实现 启动一个本地服务器 创建html,引入资源库 解析xls文件 写入中间logo 写入底部文字 canvas转化为图片,并下载到本地 递归调用 最终效果 需求 一次普通的技术需求会议 ​ 项目经理首先发言 我们技术这边需要将xls表格中的几千条数据变成二维码,并且中间镶嵌logo,图片底部放置编号,由于xls表格数据私密,不能通过第三方完成 ​ 平常这个事情都是后端处理的,前端就是来摸鱼的,但是这次一反常

  • js实现瀑布流效果(自动生成新的内容)

    当滚动条接近底部会自动生成新的内容(色块) 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{list-style: none;} div{overflow: hidden;} ul{float: left;} li{widt

  • iOS自动生成表格效果的实现代码

    一.效果图 二.工程图 三.代码. RootViewController.h #import <UIKit/UIKit.h> #import "LabelOnBackImage.h" @interface RootViewController : UIViewController { LabelOnBackImage *labelFirst; } @end RootViewController.m #import "RootViewController.h&quo

  • 一个JAVA小项目--Web应用自动生成Word

    前段时间接到一个Web应用自动生成Word的需求,现整理了下一些关键步骤拿来分享一下. 思路:(注:这里只针对WORD2003版本,其它版本大同小异.) 因为WORD文件内部的数据及格式等是通过XML文件的形式存储的,所以WORD文件可以很方便的实现由DOC到XML格式的相互转换,而操作XML文件就方便的多了,这样就实现了与平台无关的各种操作,通过节点的查询.替换.删除.新增等生成Word文件.所以,根据模板生成WORD文件实质就是由用户数据替换XML文件中特殊标签,然后另存为一个DOC文件的过

  • 使用 webpack 插件自动生成 vue 路由文件的方法

    一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin在项目中试点成功了,现在在项目中已经不需要再维护路由配置文件了,由插件自动生成,节省了大家维护路由的时间. 从长远来看,使用插件自动生成路由是具有一定好处的.当项目中的路由配置非常多的时候,为了区分业务,你可能需要分成许多个文件来存放这些路由文件,这样就不得不去维护这些路由文件. 比如这样的路由文件结构: |-src/ |-router/ index.js childrenRouter.js

随机推荐