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入门教程(12) js对象化编程
Jan 31 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
浅析vue中的nextTick
Dec 28 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根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python如何调用外部系统命令
2019/08/07 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python打印异常信息的两种实现方式
2019/12/24 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
企业车辆管理制度
2014/01/24 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
气象学专业个人求职信
2014/04/22 职场文书
毕业生应聘求职信
2014/07/10 职场文书
面试通知单大全
2015/04/20 职场文书
加班费申请报告
2015/05/15 职场文书
党员转正大会主持词
2015/07/02 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
详细分析PHP7与PHP5区别
2021/06/26 PHP
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS