<!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. session cookie简介

    会话机制:Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身 ...

  2. python+selenium，打开浏览器时报selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PATH

    有一年多没写web自动化了,今天搭建环境的时候报了一个常见错误,但是处理过程有点闹心,报错就是常见的找不到驱动<selenium.common.exceptions.WebDriverExcep ...

  3. 获取txt md5值上传文件完整性校验

    网络上传文件到服务器 做md5 校对.判断文件是否破坏 首先求txt文件的md5值 ,1万条数据 求出的值 文件MD5:e5467b6a8e3c26af8c5af0bda3739280 服务器处理程序 ...

  4. Problem Description——用c语言实现素数的判定

    Problem Description 对于表达式n^2+n+41,当n在(x,y)范围内取整数值时(包括x,y)(-39<=x<y<=50),判定该表达式的值是否都为素数. Inp ...

  5. swoole和workerman

    作者:韩天峰链接:https://www.zhihu.com/question/47994137/answer/131700752来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  6. 关于jquery的选择器中的空格问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 单点登录的三种实现方式 转自： https://blog.csdn.net/python_tty/article/details/53113612

    单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...

  8. 2-创建spring boot项目

    想要创建一个spring boot项目,最好的方法就是参照官网的例子: https://spring.io/guides/gs/maven/#scratch 创建的过程我就不再啰嗦了,官网描述非常详细 ...

  9. 20175316 盛茂淞 MyCP(课下作业，必做)

    题目要求 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件(内容为 ...

  10. ceph删除pool提示（you must first set the mon_allow_pool_delete config option to true）解决办法

    现象: 1.在mon节点打开/etc/ceph/ceph.conf,增加以下 2.重启ceph-mon systemctl restart ceph-mon.target 3.删除pool [root ...