JS实现动态生成html table表格的方法分析

 更新时间:2018年07月11日 11:16:46   转载 作者:antchow-  
这篇文章主要介绍了JS实现动态生成html table表格的方法,结合实例形式分析了javascript针对数组数据的读取、遍历以及动态生成相关操作技巧,需要的朋友可以参考下

本文实例讲述了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表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JavaScript输出所选择起始与结束日期的方法

    JavaScript输出所选择起始与结束日期的方法

    这篇文章主要介绍了JavaScript输出所选择起始与结束日期的方法,涉及javascript结合HTML5元素操作日期运算的相关实现技巧,需要的朋友可以参考下
    2017-07-07
  • 基于javascript的COOkie的操作实现只能点一次

    基于javascript的COOkie的操作实现只能点一次

    这篇文章主要介绍了基于javascript的COOkie的操作实现只能点一次,需要的朋友可以参考下
    2014-12-12
  • 兼容ie和firefox js关闭代码

    兼容ie和firefox js关闭代码

    最近做项目的时候碰到一个问题: 在js里面使用window.close(),IE下工作正常,但是FireFox下有时可以,有时不行。
    2008-12-12
  • Javascript节点关系实例分析

    Javascript节点关系实例分析

    这篇文章主要介绍了Javascript节点关系,实例分析了javascript操作父子节点及兄弟节点的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 在JS数组特定索引处指定位置插入元素的技巧

    在JS数组特定索引处指定位置插入元素的技巧

    这篇文章主要介绍了如何在JS数组特定索引处指定位置插入元素?将一个元素插入到现有数组的特定索引处,需要的朋友可以参考下
    2014-08-08
  • js实现转动骰子模型

    js实现转动骰子模型

    这篇文章主要为大家详细介绍了js实现转动骰子模型,自动随机生成骰子数的模型,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • webpack热模块替换(HMR)/热更新的方法

    webpack热模块替换(HMR)/热更新的方法

    模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换、增加、删除必要的模块,本篇文章主要介绍了webpack热模块替换(HMR)/热更新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • js验证电话号码与手机支持+86的正则表达式

    js验证电话号码与手机支持+86的正则表达式

    本篇文章主要介绍了js验证电话号码与手机支持+86的正则表达式。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • Bootstrap源码解读排版(1)

    Bootstrap源码解读排版(1)

    这篇文章主要源码解读了Bootstrap排版,介绍了Bootstrap排版的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 认识less和webstrom的less配置方法

    认识less和webstrom的less配置方法

    下面小编就为大家带来一篇认识less和webstrom的less配置方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论