<!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. 关于Android UI 优化

    之前项目为了同时兼容tv和手机端的UI,使用了百分比布局来动态计算控件的宽高,这种适配方案只关心屏幕的宽高(分辨率),与屏幕的像素密度无关. 在新的项目里也使用了这种方案.但是由于项目的运行硬件计算能 ...

  2. 解决InetAddress.isReachable(timeout)在windows xp始终返回false的bug

    笔者最近在做产品,其中一个环节用到ping测试主机是否在线. 开发环境:Windows 7 64bit+JDK1.8 x64 以下是检测主机是否在线,开发环境中测试通过 public static b ...

  3. Redis master/slave,sentinel,Cluster简单总结

    现在互联网项目中大量使用了redis,本文著主要分析下redis 单点,master/slave,sentinel模式.cluster的一些特点. 一.单节点模式 单节点实例还是比较简单的,平时做个测 ...

  4. 史上最全 | 39个RNAseq分析工具与对比

    文献:Sahraeian S M E, Mohiyuddin M, Sebra R, et al. Gaining comprehensive biological insight into the ...

  5. NOIP2018游记-退役之战

    \(Day\ 0\) 从火车站下来坐地铁\(1\)小时,再乘公交车到酒店,还要帮队里一个断腿大佬搬东西,累死我了.. 到酒店就快\(5\)点了,想打个牌也没时间. 酒店的房间很不错,空间大又干净,后来 ...

  6. go的包下载失败解决方案

    包被墙的方案 1 翻啊的墙 2 gopm 3 https://github.com/golang/net 4 使用国内网站打包 5 export GOPROXY=https://goproxy.io

  7. Python-docx 读取word.docx内容

    第一次写博客,也不知道要写点儿什么好,所以就把我在学习Python的过程中遇到的问题记录下来,以便之后查看,本人小白,写的不好,如有错误,还请大家批评指正! 中文编码问题总是让人头疼,想要用Pytho ...

  8. Windows Server 2012 配置远程桌面帐户允许多用户同时登录

    网上找了很多关于设置远程桌面最大连接数的文章,大都是说先要到控制面板的管理工具中设置远程桌面会话主机等,大体和我之前的文章<设置WINDOWS SERVER 2008修改远程桌面连接数>里 ...

  9. Windows 10 专业版 长期服务版 激活

    这个用小白系统之后一段时间显示要求激活,或者更改产品秘钥.网上找了许多秘钥也是没啥用,又不想用激活工具的话,可以试试用win+R 输入cmd : 依次输入:slmgr /skms kms.digibo ...

  10. Finish final project

    一.项目地址:https://github.com/Joyce45/final-project 二.团队成员陈述: 于浩: 张雨: 遇到的问题:1.通过relativepanel解决了刚开始设计上使用 ...