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 相关文章推荐
js下获取div中的数据的原理分析
Apr 07 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
学习vue.js条件渲染
Dec 03 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
Firefox div高度自适应
2009/04/28 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
整理Python 常用string函数(收藏)
2016/05/30 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
python读取二进制mnist实例详解
2017/05/31 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
英文简历自荐信范文
2013/12/11 职场文书
社区食品安全实施方案
2014/03/28 职场文书
授权委托书(完整版)
2014/09/10 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
小学校园广播稿
2015/08/18 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书