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 相关文章推荐
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery中库的引用方法
Jan 06 jQuery
原生JS实现前端本地文件上传
Sep 08 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
微信小程序动态显示项目倒计时
Jun 20 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
php Undefined index的问题
2009/06/01 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
瑞典度假品牌:OAS
2019/05/28 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
会计岗位职责
2013/11/08 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
减负增效提质方案
2014/05/23 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL