1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>动态创建表格</title>
  5. <meta charset="utf-8" />
  6. <style>
  7. table{width:600px; border-collapse:collapse;
  8. text-align:center;
  9. }
  10. td,th{border:1px solid #ccc}
  11. </style>
  12.  
  13. </head>
  14. <body>
  15. <div id="data">
  16. <!--table>(thead>tr>th*3)+tbody + tab-->
  17. <table>
  18. <thead>
  19. <tr>
  20. <th>ename</th>
  21. <th>salary</th>
  22. <th>age</th>
  23. </tr>
  24. </thead>
  25. </table>
  26. </div>
  27. <script>
  28. var json=[
  29. {"ename":"Tom", "salary":11000, "age":25},
  30. {"ename":"John", "salary":13000, "age":28},
  31. {"ename":"Mary", "salary":12000, "age":25}
  32. ];
  33. //动态创建父元素tbody
  34. var tbody=document.createElement("tbody");
  35. //暂时不要将tbody追加到table中
  36. //先在内存中,将所有行加到tbody中
  37. //遍历json中每个员工对象
  38. for(var emp of json){
  39.  
  40. //每遍历一个员工对象,就创建一个tr元素,并追加到tbody中
  41. // var tr=document.createElement("tr");
  42. //将tr追加到tbody下
  43. // tbody.appendChild(tr);
  44.  
  45. var tr=tbody.insertRow();//上面两句简化为一句
  46. //遍历当前员工对象emp中的每个属性
  47. // 属性名
  48. for(var pname in emp){
  49. //每遍历一个属性,就创建一个td
  50. var td=document.createElement("td")
  51. //<td></td>
  52. //并将td追加到tr中
  53. tr.appendChild(td);
  54. //设置td的内容为当前对象的当前属性值:
  55. td.innerHTML=emp[pname];
  56. //emp.pname;
  57. //emp["pname"]
  58. }
  59. }
  60.  
  61. //最后再将tbody一次性追加到table中
  62. document.querySelector("table")
  63. .appendChild(tbody);
  64. </script>
  65. </body>
  66. </html>

使用json数据动态创建表格2(多次绘制第一次简化 var tr=tbody.insertRow();)的更多相关文章

  1. js将json数据动态生成表格

    今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...

  2. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  3. jQuery 根据JSON数据动态生成表格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. 一起使用mock数据动态创建表格

    在ant-design中,我们创建一个基础table会怎么实现呢? 如下代码可视,我们会自己创建一些数据,在表格中渲染出来,如下 <Card title="基础表格"> ...

  5. jQuery利用JSON数据动态生成表格

    <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; fon ...

  6. mui 根据 json 数据动态创建列表

    使用 underscore.js 模块解析 Underscore提供了一个轻量级的模板解析函数,它可以帮助我们有效地组织页面结构和逻辑. 实例: <!DOCTYPE html> <h ...

  7. FineUIMvc随笔 - 动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...

  8. FineUIMvc随笔(1)动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...

  9. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

  10. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

随机推荐

  1. 第一阶段:linux运维基础·1

    1. 服务器的主要硬件是?以及其作用是? cpu 相当于人体的大脑,负责计算机的运算和控制 内存 解决cpu与硬盘之间速度不匹配的问题 磁盘 永久存放数据的存储器 主板 直接或间接的将所有的设备连接在 ...

  2. Sublime Text 修改默认语言为Python

    Sublime Text 3 修改默认语言为Python 步骤如下 英文:Tools - Developer - New Plugin 中文:工具 - 插件开发 - 新建插件 清空原来内容,用下面的代 ...

  3. 使用GitHub Actions实现自动化部署

    前言 大家在工作中想必都是通过自动化部署来进行前端项目的部署的,也就是我们在开发完某个需求时,我们只需要将代码推送到某个分支,然后就能自动完成部署,我们一般不用关心项目是如何build以及如何depl ...

  4. GAC简述

    GAC简介 GAC全称是Global Assembly Cache作用是可以存放一些有很多程序都要用到的公共Assembly,例如System.Data.System.Windows.Forms等等. ...

  5. c语言内存四区、数据存储范围和内存存储方向

    (1)代码区通常是共享只读(代码无法修改)的,即可以被其他的程序调用,例如运行两个qq,除了数据不一样,代码都是一样的, 每次运行qq,都会将代码和数据加载到内存中,除了数据,每次加载的代码都是一样的 ...

  6. navisworks2021保姆级下载安装教程

    navisworks2021 WIN10 64位安装步骤:1.先使用"百度网盘客户端"下载NV_CN_2021软件安装包到电脑磁盘里,并解压缩,安装前先断网,然后找到Autodes ...

  7. Axios +Vue + themeleay

    1.pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  8. 一行代码实现shell if else逻辑

    前言 前几天学习 shell 脚本,发现这种好用的写法,简单记录一下. if else 一行实现 if [ 1=1 ] ;then echo "条件成立";else echo &q ...

  9. linux系统安装nginx中的subs-filter模块

    debain系 nginx源里面一般都包含 nginx的第三方模块 所以对应已经安装了nginx 的系统可以直接安装第三方模块 sudo apt install libnginx-mod-http-s ...

  10. [Kogel.Subscribe.Mssql]SQL Server增量订阅,数据库变更监听

    此框架是SQL Server增量订阅,用来监听增删改数据库数据变更 目前仅支持SQL Server,Nuget上可以下载安装 或者使用Nuget命令添加包 dotnet add package Kog ...