<!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. 【Oracle 11gR2】静默安装 db_install.rsp文件详解

    #################################################################### ## Copyright(c) Oracle Corporat ...

  2. BurpSuite 各模块使用

    Proxy  代理 对浏览器进行代理 对浏览器增加代理服务器 可以对http 请求进行监视 intercept is on 进行监控  off 不监控 可以任意修改 对任意的网络请求 进行爬虫 在 s ...

  3. element框架中表格的筛选功能使用说明（转载）

    一.element框架中表格的筛选功能使用说明 转载:https://blog.csdn.net/liangxhblog/article/details/80513030 在element ui 框架 ...

  4. Struts2_属性驱动

    在jsp页面提交到action中的表单元素在action中是以对象的形式存在的, action中的对象name必须与jsp页面中的表单元素name相同,struts框架自动为action的对象赋值. ...

  5. 【Java每日一题】20170322

    20170321问题解析请点击今日问题下方的“[Java每日一题]20170322”查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; public cla ...

  6. Gvim 和vim 有什么区别

    Gvim 和vim 有什么区别 Gvim是windows的 vim是linux的黑色的命令符 Gvim是单独的窗口下的vim,像notepad一样. vim就是在黑乎乎的cmd窗口下的编辑器.wind ...

  7. ApplicationListener详解

    ApplicationListener详解 ApplicationListener可以监听某个事件event 通过实现这个接口,传入一个泛型事件,在run方法中就可以监听这个事件,从而做出一定的逻辑 ...

  8. 3：Python条件语句

    1.if基本语句 if 条件: 内部代码块 内部代码块 else …… print('……') 2.if支持嵌套 if 1==1: if 2==2 print(n1) print(n2) else: ...

  9. 2018-08-29 浏览器插件实现GitHub代码翻译原型演示

    此原型源自此想法: 中文化源码. 考虑到IDE插件工作量较大, 且与IDE绑定. 在代码转换工具的各种实现中, 综合考虑实用+易用+长远改进潜力, 浏览器插件似乎较有优势. 于是用最快捷的方式实现这一 ...

  10. python检查URL是否能正常访问

    https://blog.csdn.net/u010798367/article/details/53008439 今天,项目经理问我一个问题,问我这里有2000个URL要检查是否能正常打开,其实我是 ...