<!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. backbond整体架构

    (function(factory) { // 在这里是backbone模块化的一个接口.支持AMD,CMD和全局变量模式.代码很好理解. })(function(root, factory, _, ...

  2. Web网站配置Gzip，压缩js css文件

    启用apache的gzip 找到httpd.conf,打开文件找到对mod_deflate的注释 #LoadModule deflate_module modules/mod_deflate.so 去 ...

  3. iframe关闭操作

    关闭自定义 Div+Iframe弹窗 :window.parent.$("div的id/class/name").remove();//移除div 关闭Iframe弹窗:windo ...

  4. 《c#图解教程》

    书名 <c#图解教程> 图片 时间 2017-10-12月 学习 第20章的异步编程很好,在项目里面很有用.东西有点多时间久了不用就忘了

  5. java_自定义标签运行原理

    一.自定义标签运行原理: 二.文字说明 1.IE->web服务器 2.Web服务器->jsp 3.遇到自定义标签,首先实例化标签所对应的标签处理器类 4.调用setPageContext方 ...

  6. 判断文本是否溢出/hover显示全部

    前言 在工作中我们经常会遇到,文字过多,需要用省略号,并且鼠标hover的时候 还需要 显示全部的文字的需求. 正文 文字过多需要用省略号的实现:上代码啦 .ellipsis { width: 100 ...

  7. xml方式封装数据方法

    1.xml方式封装数据方法 2.demo <?php xml方式封装数据方法 /** * [xmlEncode description] * @param [type] $code [descr ...

  8. js中判断空及获取当前服务的根路径

    function isValue(o) { return (this.isObject(o) || this.isString(o) || this.isNumber(o) || this.isBoo ...

  9. 客户化软件时代的前夜 ZT

    制造业:从手工模式到大规模生产,再到大规模定制 工业革命开始以后,机器全面代替了手工工具.随着工业经济的不断发展,机器的使用导致了两种截然不同的方式.一种是手工生产基本思想的延续,另一种则是大规模生产 ...

  10. Android为TV端助力 帧动画

    首先在res/drawable/name1.xml/定义一组图片集合: <?xml version="1.0" encoding="utf-8"?> ...