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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
js+css实现扇形导航效果
Aug 18 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过滤★等特殊符号的正则
2014/01/27 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
nodeJS微信分享
2017/12/20 NodeJs
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
Python子类继承父类构造函数详解
2019/02/19 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
信息学院毕业生自荐信范文
2014/03/04 职场文书
幼儿园教师考核评语
2014/12/31 职场文书