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>

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

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

相关文章推荐

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

js根据后台配置动态生成合并行。。。。

Html 动态创建表格

在项目中写到的一段代码: 在 节点下面循环创建表格 js 文件中 //接受参数为一个存储客户的数组,根据客户个数,创建相应个数的表格 function createCustomerElemen...

html中table中动态添加单元格示例

项目遇到需要进行动态的表格d

js动态设置表格内容,生成HTML文件

通过js方式设置table中数据内容,并生成为HTML文件。这篇文章只是为动态设置表格内容作个范例,里面有一些常用的js方法。  var i = 0;  function addRow()...

HTML之动态加载表格数据

New Document                 *{        margin:0px;     ...

多叉树求最优解问题

阿里巴巴的ODPS大数据处理平台可以启动一系列并发的作业,每个作业中存在一系列存在父子关系的任务。每个任务用一个三元组表示–(任务id,父任务id,执行开销),其中任务id是一个正整数(>0);父任务...

JS动态生成函数

用 Function 类直接创建函数的语法如下: var function_name = new function(arg1, arg2, ..., argN, function_body) ...

JS面试题-动态生成表格代码

利用JS动态生成表格,是一个JS面试题,在行、列输入框中输入要生成的行列数,可立即生成表格,要求如下:   1) 任意输入行数或列数, 生成对应表格;   2) 行数, 列数必须为正整数类型, 否...

史上最简单的 MySQL 教程(十九)「范式」

范式范式:Normal Farmat,是为了解决数据的存储和优化问题。在数据存储之后,凡是能够通过关系寻找出来的数据,坚决不再重复存储,范式的终极目标是减少数据冗余。范式是一种分层结构的规范,共 6 ...

文件服务器-FastDfs-安装-配置

介绍FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储、文件同步、文件访问(文件上传、文件下载)等,解决了大容量存储和负载均衡的问题。非常适合用来存储用户图片、视频、...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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