<!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. 判断本机ip是电信还是网通

    string location = "0";//0是网通 1是电信 Uri uri = new Uri("http://www.ip138.com/ips138.asp& ...

  2. JQuery官方学习资料（译）：避免与其他库的冲突

    避免与其他库的冲突     JQuery库和它所有的插件都是包含在jQuery命名空间下的,作为一般规则,全局对象被存储在jQuery的命名空间内,所以你不会得到jQuery和任何其他库之间的冲突(例 ...

  3. JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏

    摘要: 作者将自己常用的JavaScript模块分享给大家. 原文:JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...

  4. javascript对象与方法

    对象与方法 一.数组(Array) 1.使用new关键字创建数组 var box = new Array();                                     //创建了一个数 ...

  5. 2016年 CodePen 最热门的前端代码 Top 100

    每年 Codepen 都会公布年度最热门的代码片段,这些片段有的技术超弦,有的超实用.有的超有创意,有空看看都能给我们带来灵感. 同时从 Codepen 的代码上也能学习一些牛人的写法,不管是设[…… ...

  6. [转]JS学习总结-技巧、方法、细节

    变量转换 var myVar = "3.14159", str = ""+ myVar,// string类型 int = ~~myVar, // number ...

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

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

  8. Android Service、IntentService，Service和组件间通信

    Service组件 Service 和Activity 一样同为Android 的四大组件之一,并且他们都有各自的生命周期,要想掌握Service 的用法,那就要了解Service 的生命周期有哪些方 ...

  9. leetcode-26.删除重复数组中的重复项

    leetcode-26.删除重复数组中的重复项 题意 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数 ...

  10. (其他)Thinkpad笔记本装系统

    电脑城装一次系统收你40元,不如自己装系统. 虽然百度上装系统的文章泛滥,但是还是自己尝试. 前3个小时thinkpad e570是不是坏掉了,怎么就进不去BIOS,这个时候直接搜索这个型号,问题输入 ...