<!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{

            border-collapse: collapse;

        }

    </style>

</head>

<body>

    <div id="box">

    </div>

    <!-- <table>

        <thead>

            <tr>

                <th></th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>

                    <a href="jvascript:;"></a>

                </td>

            </tr>

        </tbody>

    </table>

     -->

    <script>

        var datas=[

            { name: 'zs', sex: "男", subject: '语文', score: 90 },

            { name: 'ls', sex: "男", subject: '数学', score: 80 },

            { name: 'ww', sex: "女", subject: '英语', score: 60 },

            { name: 'zl', sex: "女", subject: '英语', score: 100 },

            { name: 'xs', sex: "女", subject: '英语', score: 60 },

            { name: 'dc', sex: "女", subject: '英语', score: 70 }

        ]

        var headDatas = ['姓名', '性别', '科目', '成绩', '操作'];

        var box=document.getElementById("box");

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

         /* 将创建的table添加到box里面去 */

        box.appendChild(table);

        table.width="400px";

        table.border="1px";

        /* 动态创建thead */

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

        table.appendChild(thead);

        thead.style.height="20px";

        thead.style.backgroundColor="purple";

        /* 动态创建th */

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

        thead.appendChild(tr);

        /* 循环遍历tr */

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

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

            tr.appendChild(th);

            th.innerText=headDatas[i];

         }

         /* 创建tbody */

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

         tbody.style.textAlign="center";

         table.appendChild(tbody);

         /* 循环遍历datas内容 */

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

             var data=datas[i];

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

            tbody.appendChild(tr);

            /* 遍历data */

            for(var key in data){

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

                tr.appendChild(td);

                td.innerText=data[key];

            }

            /* 添加a标签 删除 */

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

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

            th.appendChild(a);

            tr.appendChild(th);

            a.innerText="删除";

            a.href="javascript:;";

            a.onclick=function(e){

                var name=prompt("我这么可爱，真的要删除我吗？输入yes我就消失啦");

                if(name=="yes"){

                    tbody.removeChild(this.parentNode.parentNode);

                }

            }   

         }

    </script>

</body>

</html>

js原生动态创建表格的更多相关文章

  1. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  2. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

  3. javascript动态创建表格：新增、删除行和列

    转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...

  4. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 第84天：jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. FineUIMvc随笔 - 动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...

  8. FineUIMvc随笔（1）动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...

  9. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

随机推荐

  1. Spring Cloud Stream消费失败后的处理策略（四）：重新入队（RabbitMQ）

    应用场景 之前我们已经通过<Spring Cloud Stream消费失败后的处理策略(一):自动重试>一文介绍了Spring Cloud Stream默认的消息重试功能.本文将介绍Rab ...

  2. scala的安装及使用

    前提你的集群机器已经安装好jdk1.7.0_79.hadoop-2.7.3: 配置中使用了master01.slave01.slave02.slave03: 文中的所有操作都是在之前的文章http:/ ...

  3. 【golang-GUI开发】Qt5的安装

    golang一直被认为没有好的GUI库,事实并非如此. 目前有基于gtk+3.0的gotk3:https://github.com/gotk3/gotk3 以及接下来我们要说的qt:https://g ...

  4. windows 下 nginx 配置文件路径

    nginx在windowns下路径 http{ #虚拟主机1 server{ listen 80; #监听端口,基于IP配置的时候变更此处,比如192.168.1.100:8080; server_n ...

  5. 6.2 小表驱动大表（exists的应用）

    1. 优化原则:小表驱动大表,即小数据集驱动大数据集. select * from A where id in (select id from B) 等价于: for select id from B ...

  6. 史上最全python面试题详解（三）（附带详细答案（关注、持续更新））

    38.面向对象深度优先和广度优先是什么? 39.面向对象中super的作用? 40.是否使用过functools中的函数?其作用是什么? Python自带的 functools 模块提供了一些常用的高 ...

  7. Vue项目build打包部署到Tomcat后，刷新报404错误解决方案

    问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test; ...

  8. 初识 Java-监听器

    使用Listener类当java  web应用程序在web容器中运行时,在java web应用程序内部会不断发生各种事件,例如web应用的启动,暂停,销毁等.以及web应用中session开始和结束 ...

  9. tpshop linux安装下注意事项

    1. 安装目录不可读写---赋予权限 chmod -Rf 777 public 2.安装环境参考 https://lnmp.org/install.html 3.wget 若没有安装 yum 安装

  10. crontab命令行和日志查看

    1.基本命令行模式 注意:非root用户 systemctl restart crond 失效,请使用最底层的驱动重启 2.crontab日志 cron日志保存在系统目录/var/log/cron 命 ...