JS实现动态生成html table表格的方法分析


Posted in Javascript onJuly 11, 2018

本文实例讲述了JS实现动态生成html table表格的方法。分享给大家供大家参考,具体如下:

刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz)

首先我们要在html里面有如下代码:

<table>
  <tbody id="tbody1">
  </tbody>
</table>

如果想在table里面加其他的可以随便加(如加一个表头等等),只需要知道等会js动态生成的内容全部会在tbody里面就可以了。

然后需要如下的js来动态生成html:

function creatTable(data){
 //这个函数的参数可以是从后台传过来的也可以是从其他任何地方传过来的
 //这里我假设这个data是一个长度为5的字符串数组 我要把他放在表格的一行里面,分成五列
 var tableData="<tr>"
 //动态增加5个td,并且把data数组的五个值赋给每个td
 for(var i=0;i<data.length;i++){
  tableData+="<td>"+data[i]+"</td>"
 }
 tableData+="</tr>"
 //现在tableData已经生成好了,把他赋值给上面的tbody
 $("#tbody1").html(tableData)
}

上面的那个tableData可以随意加html语言,例如我们给tr设置一下宽度,把var tableData=""改为:

var tableData="<tr style='width:300px'>"

需要注意的是因为我们在给tableData赋值的时候已经用了双引号,所以我们在设置style的时候要全部用单引号,不然就会报错,这个大家应该都知道,就不多说了。

最后就是在页面调用上面写的函数来给表格动态添加数据啦。或者我们也可以让页面在加载的时候就自动给表格动态添加数据:

<script type="text/javascript">
 window.onload()=function ()
 {
  //这个里面复制上面creatTable函数的内容
 }
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
JavaScript实现缓动动画
Nov 25 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 #Javascript
vue移动端实现红包雨效果
Jun 23 #Javascript
vue实现学生录入系统之添加删除功能
Jul 11 #Javascript
微信小程序实现红包雨功能
Jul 11 #Javascript
小程序ios音频播放没声音问题的解决
Jul 11 #Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 #Javascript
微信小程序实现发红包功能
Jul 11 #Javascript
You might like
多重?l件?合查?(二)
2006/10/09 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
销售主管岗位职责范本
2014/02/14 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
承诺书模板大全
2015/05/04 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
七年级话题作文之执着
2019/11/19 职场文书