微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

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

php中文网

发布： 2016-05-16 19:09:40

原创

1386人浏览过

晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序。
要求是：
1，对于空内容，应该写为"

讯飞智作-讯飞配音

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

讯飞智作-讯飞配音

67

讯飞智作-讯飞配音

",否则在ie会显示的很变态（ie当作该单元格不存在）。
2，当输出数据条数不等于表格的“长X宽”时，用" "自动填补最后一行空余的地方。

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

<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>
<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]:" ")+"");     
        }     
        outStr+=""    
    }     
    outStr+="";     
    document.write(outStr+"<center>执行时间："+(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="<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]+"");     
             
        if(temp==0){     
            outStr+="";     
        }     
    }     
         
    var x=i%cols;     
    if(x!=0){     
        for(var i=0;i<(cols-x);i++){     
            outStr+="<td> ";     
        }     
        outStr+=""    
    }     
    outStr+=""    
    document.write(outStr+"<center>执行时间："+(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);     
</script></span>

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

大家都在看：

如何创建一个通知栏消息插件_JavaScript通知消息插件开发与交互设计教程 JavaScript中利用matchAll实现复杂字符串拆分与格式化优化循环网页抓取：实现健壮的Fetch请求重试机制 JS注解怎么生成API文档_ 利用JS注解自动生成API文档的方法 JavaScript深拷贝与浅拷贝的几种方式_javascript技巧

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：javascript写的一个表单动态输入提示的代码_表单特效下一篇：javascript下操作css的float属性的特殊写法_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

JavaScript_跨平台开发与Electron实战 Electron是基于Chromium和Node.js的桌面应用开发框架，支持HTML、CSS、JavaScript技术栈，广泛用于VSCode、Slack等跨平台应用。

2025-11-21 20:35:02

322

JavaScript算法优化_时间复杂度与空间复杂度分析斐波那契数列计算中，原始递归法时间复杂度为O(2ⁿ)，因重复计算导致效率低下；通过记忆化优化可降至O(n)，显著提升性能。

2025-11-21 20:34:02

544

JavaScript物联网_设备连接与数据处理 JavaScript通过MQTT协议实现物联网设备连接，利用Node.js解析传感器数据并格式化为标准结构，结合InfluxDB存储时序数据，支持前端可视化与云端转发，构建完整IoT数据链路。

2025-11-21 20:33:35

717

ES6新特性_箭头函数应用箭头函数是ES6引入的简洁函数语法，使用=>定义，省略function关键字和return语句，单参数可省括号，如n=>n*2；它不绑定this，继承外层作用域的this值，解决回调中this指向问题，如在setTimeout或对象方法中正确访问属性；广泛用于map、filter、reduce等数组方法，提升可读性，但不能用作构造函数，也没有arguments对象，合理使用可使代码更简洁且this更可控。

2025-11-21 20:32:02

276

JavaScript装饰器_类与方法修饰实践装饰器通过修改类或方法行为提升代码可维护性，如用LogCreation记录类创建时间，AddTimestamp添加实例属性，MeasureTime统计方法耗时，PreventConcurrent防止异步重复执行。

2025-11-21 20:31:02

254

JavaScript生物识别_WebAuthn认证流程 WebAuthn通过公钥加密和生物识别实现无密码认证，提升安全性和用户体验。1.注册时调用navigator.credentials.create()生成密钥对，公钥由服务器存储，私钥安全保存在设备中；2.登录时通过navigator.credentials.get()获取凭证，使用私钥对挑战进行签名完成身份验证；3.服务器负责生成挑战、验证签名结构、校验源和rpId一致性，并维护用户与凭证映射；4.生物识别仅用于本地验证用户存在，解锁私钥时不暴露生物数据，保障隐私。该方案依赖前后端协同，实现抗

2025-11-21 20:28:02

912

JavaScript原型防御：保护内置对象行为及预防策略本文探讨了JavaScript中第三方脚本可能恶意修改原始类型原型的问题，导致内置方法行为异常。文章核心内容是介绍如何利用Object.freeze()方法来冻结内置对象的原型，从而有效预防原型被篡改，确保代码运行的稳定性和预期行为。同时，也指出了这种防御策略的局限性，如执行顺序要求和无法恢复已被修改的原型等。

2025-11-21 20:27:01

107

JavaScript元编程_Proxy与Reflect高级应用 Proxy和Reflect提供JavaScript元编程能力，Proxy可拦截对象操作如get、set、apply，结合Reflect能实现响应式系统、只读代理、自动嵌套对象等高级功能，提升灵活性但需注意性能与调试复杂度。

2025-11-21 20:24:02

574

Vue应用中SimpleMDE Markdown编辑器初始化失效问题的解决方案在使用Vue应用中集成SimpleMDEMarkdown编辑器时，常见的初始化失败问题源于Vue在挂载时替换DOM节点。本文将详细阐述此问题的原因，并提供一种利用Vue生命周期钩子mounted和ref属性来正确初始化SimpleMDE编辑器的方法，确保其在Vue环境中正常运行并保持响应性。

2025-11-21 20:22:02

464

JavaScript构建工具_Gulp任务流与插件开发 Gulp是基于Node.js的流式前端构建工具，通过src()、dest()、pipe()和watch()四大核心方法实现高效的任务自动化处理。它利用内存中的文件流减少磁盘读写，提升性能，支持SASS编译、CSS压缩、JS合并等任务，并可通过自定义插件扩展功能，适用于轻量级或定制化项目构建场景。

2025-11-21 20:22:02

483

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部