<!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. 有关Lambda的一些思考

    问题: What do lambda expressions do? Can we write all functions as lambda expressions? In what cases a ...

  2. Checked Uncheckd异常

    Checked : 你可以在写代码的时候就throw 或者try catch 的 Unchecked :  Error   + RuntimeException .提前无法预测的 http://www ...

  3. dskinlite(uieasy mfc界面库)使用记录2:绘制动态元素（按钮控件绘制元素动态控制，改变图片和文字）

    效果图:这4个分别是按钮按下后4种状态的效果 第88行是显示默认的按钮文字,没有id,SetWindowText改的就是它了 第87行是左边的图片,id是ico,可以通过程序控制 第89行是蓝色的文字 ...

  4. Security.ssl-pinning

    SSL Pinning 1. What's SSL Pinning? "SSL Pinning is making sure the client checks the server’s c ...

  5. 第一次面试经历（hr面）

    经过介绍,我有幸去到一家国际背景的广告公司面试前端开发实习生.收到的邮件是复试通知,看来我已经跳过了第一轮面试. 来到hr请我进了一个小间坐下里填求职书,里面有各种个人信息,有兴趣爱好,有工作经历,以 ...

  6. WIN10 安装 ReportBuilder3.msi 提示需要 .NET Framework 4.5

    win+r键调出运行窗口输入regedit打开注册表,找到HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/NET Framework Setup/NDP/v4/Client ...

  7. 解决 ERROR: missing Change-Id in commit message footer 问题

    提交代码操作 git push origin HEAD:refs/for/XXX,提示失败ERROR: missing Change-Id in commit message footer,丢失Cha ...

  8. elasticdump 方法迁移数据

    elasticdump -rm -ti taskrabbit/elasticsearch-dump --ignore-errors=true --offset=1000  --input=http:/ ...

  9. Cordova配置与WebApp混合开发环境配置

    好久都没来更新随笔了,这阵子比较忙,不过还是在不断的学习当中,今天给大家分享一下Cordova的配置与搭建WebApp混合开发环境的配置. 准备好了吗?让我们一步步来咯!!! 1.配置JDK环境 用的 ...

  10. pip install cv2报错

    pip install cv2 安装cv2报错: Could not find a version that satisfies the requirement cv2 (from versions: ...