<!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. c# EF code First生成数据库以及表

    1. 安装Entity Framework 使用NuGet安装Entity Framework程序包:工具->库程序包管理器->程序包管理器控制台,执行以下语句: PM> Insta ...

  2. R语言实战（二）——数据分析基础知识

    一.R中数据结构 1.数据集 通常是由数据构成的一个矩形数组,行 表示 观测(记录.示例),列 表示 变量(字段.属性) 2.R中的数据结构 3.向量 c()可以用来创建向量 > a <- ...

  3. C#静态成员静态类。

    1. 在静态类中,所包含的所有成员必须是静态的.但不是所有静态成员都必须写在静态类中.       实例成员属于具体的对象,静态成员是属于类的.所以访问静态成员的时候不能通过对象来访问,只能通过类名直 ...

  4. VM虚拟机Linux和主机数据传输

    虚拟机 Linux CentOS7 vm和主机通信是利用 vm tools  点击安装 点击后系统内有一个 打开 把 拖到桌面 打开终端 cd /home/whoami/桌面 ls 查看这个.tar. ...

  5. 利用http协议对搜索引擎劫持

    主要是利用了http协议的refereer头 另外一个头user-agnet 主要是用来做流量劫持 referer 头告诉服务器用户从哪里找来的 当用户通过搜索引擎打开网站时会出现源网页 refere ...

  6. String的坑

       想必大家在熟悉不过了,不错今天就遇到了这个万年坑,哪怕喜欢翻源码的人,也不屑一顾翻它的源码,良言相劝最好翻下源码. 1. String为啥被定义为final ? 2. String是线程安全的么 ...

  7. mysql日期时间函数

    日期时间函数1.取得当前日期时间SELECT NOW(), SYSDATE(),CURRENT_TIMESTAMP() FROM DUAL2.取得当前日期SELECT CURDATE(),CURREN ...

  8. laravel接值 get post

    laravel使用一种简单的方式来访问用户提交的信息. 你可以用统一的方式来访问用户提交的信息,而不用为用户提交信息的方式操心. 引用类:use Illuminate\Support\Facades\ ...

  9. jsp引入本地图片

    jsp引入本地图片 通用解决方法: 在tomcat的server.xml配置文件中,在<host></host>标签中间添上一句 <!-- docBase : 磁盘绝对路 ...

  10. markdown 语法指南

    说明:左边是markdown的语法 右边是预览.(我这里用了黑色的背景,一般白色较多) 1. 标题 2.列表 3.引用 (1)一层引用 (2)多层引用 4.图片(如果是本地:按照语法写图片路径:如果是 ...