<!DOCTYPE HTML>

<html>

<head>

<title>动态创建表格</title>

<meta charset="utf-8" />

<style>

    table{width:600px; border-collapse:collapse;

        text-align:center;

    }

    td,th{border:1px solid #ccc}

</style>

</head>

<body>

<div id="data">

  <!--table>(thead>tr>th*3)+tbody + tab-->

  <table>

    <thead>

      <tr>

        <th>ename</th>

        <th>salary</th>

        <th>age</th>

      </tr>

    </thead>

  </table>

</div>

<script>

var json=[

{"ename":"Tom", "salary":11000, "age":25},

{"ename":"John", "salary":13000, "age":28},

{"ename":"Mary", "salary":12000, "age":25}

];

//动态创建父元素tbody

var tbody=document.createElement("tbody");

//暂时不要将tbody追加到table中

//先在内存中，将所有行加到tbody中

//遍历json中每个员工对象

for(var emp of json){

  //每遍历一个员工对象，就创建一个tr元素，并追加到tbody中

  // var tr=document.createElement("tr");

  //将tr追加到tbody下

  // tbody.appendChild(tr);

  var tr=tbody.insertRow();//上面两句简化为一句

  //遍历当前员工对象emp中的每个属性

  //     属性名

  for(var pname in emp){

    //每遍历一个属性，就创建一个td

    var td=document.createElement("td")

    //<td></td>

    //并将td追加到tr中

    tr.appendChild(td);

    //设置td的内容为当前对象的当前属性值:

    td.innerHTML=emp[pname];

               //emp.pname;

               //emp["pname"]

  }

}

//最后再将tbody一次性追加到table中

document.querySelector("table")

       .appendChild(tbody);

</script>

</body>

</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. 鹅长微服务发现与治理巨作PolarisMesh实践-上

    @ 目录 概述 定义 核心功能 组件和生态 特色亮点 解决哪些问题 官方性能数据 架构原理 资源模型 服务治理 基本原理 服务注册 服务发现 安装 部署架构 集群安装 SpringCloud应用接入 ...

  2. MySQL高可用集群MHA方案

    MySQL高可用集群MHA方案 爱奇艺在用的数据库高可用方案 MHA 是目前比较成熟及流行的 MySQL 高可用解决方案,很多互联网公司正是直接使用或者基于 MHA 的架构进行改造实现 MySQL 的 ...

  3. 【深入浅出 Yarn 架构与实现】2-4 Yarn 基础库 - 状态机库

    当一个服务拥有太多处理逻辑时,会导致代码结构异常的混乱,很难分辨一段逻辑是在哪个阶段发挥作用的. 这时就可以引入状态机模型,帮助代码结构变得清晰. 一.状态机库概述 一)简介 状态机由一组状态组成: ...

  4. python中的super()是什么？

    技术场景:python中的super,名为超类,可以简单的理解为执行父类的__init__函数.由于在python中不论是一对一的继承,还是一子类继承多个父类,都会涉及到执行的先后顺序的问题.那么本文 ...

  5. ui自动化测试数据复原遇到的坑——1、hibernate输出完整sql

    公司老项目使用SSH+informix+weblogic+IE开发,我们要做ui自动化测试,其中的测试数据复原,我打算通过hibernate输出sql,然后把插入.更新的sql改为delete或upd ...

  6. [CS61A] Lecture 1&2&3. Introduction&Functions&Control

    [CS61A] Lecture 1&2&3. Introduction&Functions&Control 前言 CS61A是加州大学伯克利分校一门计算机专业课程,用于 ...

  7. Spring Boot框架下实现Excel服务端导入导出

    Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.今天 ...

  8. 【Phoenix】简介、架构、存储、入门、常用表操作、表的映射方式、配置二级索引

    一.Phoenix简介 1.定义 构建在 HBase 之上的开源 SQL 层 可以使用标准的 JDBC API 去建表, 插入数据和查询 HBase 中的数据 避免使用 HBase 的客户端 API ...

  9. Agileboot 1.6.0 发布啦 - 一款致力于规范/精简/可维护 的Springboot + Vue3的快速开发脚手架

    平台简介 AgileBoot是一套开源的全栈精简快速开发平台,毫无保留给个人及企业免费使用.本项目的目标是做一款精简可靠,代码风格优良,项目规范的小型开发脚手架. 适合个人开发者的小型项目或者公司内部 ...

  10. C#深拷贝方法

    概述 为什么要用到深拷贝呢?比如我们建了某个类Person,并且实例化出一个对象,然后,突然需要把这个对象复制一遍,并且复制出来的对象要跟之前的一模一样,来看下我们一般会怎么做. 方法一(利用反射实现 ...