<!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. storm1.1.0 drpc 部署和调用测试

    一.配置集群storm.yaml文件,配置drpc.server 二.部署到linux上,开启nimbus,drpc,supervisor 等服务 /opt/module/storm-1.1.0/bi ...

  2. Vue element 分页

    Vue单页面,有一个带分页的表格,表格内数据关联页码,套路如下: 代码如下: <div class="c-table-list auth-list m-bottom-20"& ...

  3. UE4的委托

    UE中委托的使用很广泛,许多Event的触发都有对应的虚函数和委托,虚函数不用讲,只能在派生类中使用,而委托可以在别的类或者蓝图中使用,就应用范围而言,委托的使用更灵活.以AActor的 /** * ...

  4. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

  5. Jenkins构建maven项目跳过测试用例的命令

    在Jenkins构建项目的时候,有时候执行大量的单元测试用例需要浪费很多时间,又或者测试环境与其他dubbo,zookeeper服务器环境不通执行失败, 为了更快速的构建,可在build选项中使用如下 ...

  6. vue 导航守卫，验证是否登录

    路由跳转前,可以用导航守卫判断是否登录,如果登录了就正常跳转,没有登录就把路由指向登录页面. router.beforeEach((to, from, next) => { const next ...

  7. Spring Boot的Maven配置

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  8. es6面向对象

    <script> class user{ constructor(name,age){ this.name=name; this.age=age; } showName(){ alert( ...

  9. UGUI小技巧之Text随文本内容自动变化大小

    看了网上很多帖子,都是说在 Text 上面加上 Content Size Fitter 组件,并将对应的轴向改成 Preferred size 就可以实现 Text 大小随着文本内容自适应,如下图: ...

  10. sftp修改用户home目录后登录时报connection closed by remote host

    在sftp用户需要修改登录根目录的情况下,我们可以修改/etc/ssh/sshd_config文件中ChrootDirectory /home/[path]的路径. 但是,在重启sshd服务后,sft ...