<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #box table {

            border-collapse: collapse;

            text-align: center;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <script>

        //先进行模拟一个数据

        var json = [{

                naem: 'zw',

                age: 19,

                sex: "男",

                subject: '语文',

                scre: 90

            },

            {

                naem: 'zw',

                age: 19,

                sex: "男",

                subject: '语文',

                scre: 90

            },

            {

                naem: 'zw',

                age: 19,

                sex: "男",

                subject: '语文',

                scre: 90

            },

            {

                naem: 'zw',

                age: 19,

                sex: "男",

                subject: '语文',

                scre: 90

            },

            {

                naem: 'zw',

                age: 19,

                sex: "男",

                subject: '语文',

                scre: 90

            },

            {

                naem: 'zw',

                age: 19,

                sex: "男",

                subject: '语文',

                scre: 90

            },

        ];

        var headData = ["姓名", "年龄", "性别", "科目", "分数", "操作"];

        var box = document.querySelector("#box");

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

        box.appendChild(table);

        table.style.backgroundColor = "pink";

        table.style.width = "600px";

        table.border = "1px";

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

        table.appendChild(thead);

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

        thead.appendChild(tr);

        for (var i = 0; i < headData.length; i++) {

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

            th.innerText = headData[i];

            tr.appendChild(th);

        }

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

        table.appendChild(tbody);

        for (var j = 0; j < json.length; j++) {

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

            tbody.appendChild(tr);

            for(var key in json[j]){

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

                td.innerText=json[j][key];

                tr.appendChild(td)

            }

            var a=document.createElement('a');

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

            a.href="javascript:;"

            a.innerText="删除";

            tr.appendChild(td);

            td.appendChild(a);

            a.onclick=function(e){

               // tbody.removeChild(e.target.parentNode.parentNode);

               setTimeout(function () {

                   e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode);

                 },2000)

            }

        }

    </script>

</body>

</html>

动态创建数据table的更多相关文章

  1. 《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中

    http://blog.csdn.net/mazhaojuan/article/details/8599167 先看一下我要实现的功能界面: 这篇文章主要介绍:后台一般处理程序把从数据库查找的数据,转 ...

  2. js入门之DOM动态创建数据

    一. 知识点回顾 1. DOM结构 nodeName: '' 标签名 nodeType: '' 类型 1元素节点 2属性节点 3文本节点 nodeValue: '' 如果是元素节点 nodeValue ...

  3. laravel在控制器中动态创建数据表

    Schema::connection('usertable')->create('test', function ($table) { $table->increments('id'); ...

  4. JSF dataTable 添加列 动态创建数据表 列

    @Named @ViewScoped public class LiveRangeService implements Serializable { private List< Map<S ...

  5. Dll学习二_Dll 窗体中动态创建数据并使用Demo

    沿用上一篇Demo 环境:DelphiXE,XP,SQL2005 贴出改动过的单元代码: dbGrid控件版: unit SubMain_Unit; interface uses Windows, M ...

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

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

  7. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  8. [SAP ABAP开发技术总结]反射，动态创建内表、结构、变量

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

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

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

随机推荐

  1. .Net圈子里的一些看法

    金三银四招聘季,不一定一定要跳巢,但是出去看看行情还是有必要的,所以就有这篇随笔. 首先,这里说的.Net圈子是只两个方面 第一,技术人才,属于人的圈子 第二,技术本身,技术的圈子,也就是技术所涵盖的 ...

  2. Qt5.12.2开发Android环境搭建

    Qt-Android开发环境概要qt-opensource-windows-x86-5.12.2----armv7jdk-8u201-windows-x64android-ndk-r18b-windo ...

  3. 安装pygame出现is not a supported wheel on this platform解决办法

    安装python库pygame时出现如下错误: 查看python的版本是否与之匹配,发现版本不匹配问题 例如1.我的python3.6是32位的,就只能安装cp36的:结果发现安装还是出现问题: 2. ...

  4. python AES加密 ECB PKCS5

    class AesEbc16:  # 按块的大小, 一块一块的加密, 明文和密文长度一样 def __init__(self): self.key = b"123qweqqqwerqwer& ...

  5. node,Yeoman,Bower,Grunt的简介及安装

    作为前端,基本的html,css,js已经不太够用了,所以要学习一些前端自动化工具,来提高我们的生产力 1.NodeJS 先安装NodeJS,直接去官网,下载最新的版本,一定要最新的版本,这样会避免很 ...

  6. 【NIFI】 Apache NiFI 集群搭建

    NiFI 集群介绍 NiFi集群架构 NiFi采用Zero-Master Clustering范例.集群中的每个节点对数据执行相同的任务,但每个节点都在不同的数据集上运行.其中一个节点自动选择(通过A ...

  7. Mac OS mysql数据库安装与初始化

    一.官网下载mysql 二.安装并启用 三.数据库初始化 192:bin zhuyajing$ ./mysql -u root -p Enter password: Welcome to the My ...

  8. 小白的CTF学习之路8——节约内存的编程方式

    今天第二更,废话不说上干货 上一章我们学习了内存和cpu间的互动方式,了解到内存的空间非常有限,所以这样就需要我们在编程的时候尽可能的节省内存空间,用最少的空间发挥最大的效果,以下是几种节约内存的方法 ...

  9. Linux---一级/二级目录以及位置目录名/指令

    home目录:普通用户登录进来以后的初始位置(会在home目录下创建一个登录名相同的目录例如  / home / 用户名),如果是超级用户则就是 在根目录 /下的 root目录(也就是 /root) ...

  10. ios  国际化开发

    一,.xib 1.首先选中xib文件,在右边的inspector中选择对应的国际化语言,如下图