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传值 判断
Oct 26 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
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语法(4)
2006/10/09 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
vue实现信息管理系统
2020/05/30 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
Python 异常处理实例详解
2014/03/12 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
用python发送微信消息
2020/12/21 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
美国羊皮公司:Overland
2018/01/15 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
高中学生自我评价范文
2014/09/23 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
联谊会开场白
2015/06/01 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
讲座新闻稿
2015/07/18 职场文书
一级电子管军用接收机测评
2022/04/05 无线电
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js