js动态生成html表格

原创 2017年01月03日 20:15:11

刚在论坛上面逛的时候看到有人问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>

呕心沥血写出来的,转载请一定著名出处。

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML之动态加载表格数据

New Document                 *{        margin:0px;        padding:0px;     }     body table{ ...
  • worn_xiao
  • worn_xiao
  • 2016年09月17日 09:14
  • 5111

js通过后台配置动态生成html table表格

js根据后台配置动态生成合并行。。。。
  • dreamsigel
  • dreamsigel
  • 2017年07月25日 16:28
  • 1709

html生成表格table

代码如下: test PPT安排 上集下集 第一张第二张第三张第一张第二张 第四张第五张第六张第四张第五张...
  • youyajie
  • youyajie
  • 2012年04月23日 20:42
  • 5054

java实现任意带table表格的html页面,生成与表格相同内容的excel文件

  • 2016年09月23日 12:19
  • 910KB
  • 下载

[Javascript]在HTML页面中动态添加表格,动态生成行的示例

"http://www.w3.org/TR/html4/loose.dtd">动态添加表格示例//CopyRight@liwei 2005/11//动态删除行的函数还没有完成。注意innerHTML里...
  • softwave
  • softwave
  • 2005年11月18日 08:47
  • 12180

Html+js实现表格可编辑,并能动态添加删除行

功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容。 点击增加行,在table的末尾增加一行;点击删除行,删除table中最末尾的一行。       ...
  • qqliang1314
  • qqliang1314
  • 2014年12月10日 20:18
  • 11323

c#窗体将excel表格生成html网页(源码)

  • 2017年10月20日 17:21
  • 463KB
  • 下载

网站开发进阶(三十一)js如何将html表格导出为excel文件(后记)

js如何将html表格导出为excel文件(后记) 前言       项目前期做了个导出Excel表格的功能,但是经过测试发现只有在IE上才可以正确实现,在Chrome等浏览器中无法实现导出效果。经...
  • sunhuaqiang1
  • sunhuaqiang1
  • 2016年03月01日 17:40
  • 48284

后台动态生成table表格

以前看到动态生成table的代码时,认为特别复杂,看到代码就不想看,认为这个用不到,而且还抱着一种难的心理. 不管则着,还是逃不过,躲避不是好的方法,这次就用到了动态生成表的要求,不学不行呀,不然页面...
  • han_yankun2009
  • han_yankun2009
  • 2013年11月25日 13:34
  • 12139

js生成html---查询数据后自动生成相对应的html展现内容

一些js的基本知识。
  • chenshu0
  • chenshu0
  • 2016年11月02日 09:17
  • 934
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js动态生成html表格
举报原因:
原因补充:

(最多只允许输入30个字)