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字符串拼接的效率问题
Dec 25 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
详谈javascript异步编程
Feb 21 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
javascript中正则表达式语法详解
Aug 07 Javascript
vue首次渲染全过程
Apr 21 Vue.js
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
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
基于js中的原型(全面讲解)
2017/09/19 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python获得文件创建时间和修改时间的方法
2015/06/30 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
初入社会应届生求职信
2013/11/18 职场文书
创新型城市实施方案
2014/03/06 职场文书
就业意向书范文
2014/04/01 职场文书
供货协议书
2014/04/22 职场文书
放假通知范文
2015/04/14 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
小学安全教育主题班会
2015/08/12 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
PHP命令行与定时任务
2021/04/01 PHP
python flask框架快速入门
2021/05/14 Python
Python进度条的使用
2021/05/17 Python