<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <title></title>

        <style>

            *{

                margin: 0;

                padding: 0;

            }

            table{

                width: 500px;

                border-color: chartreuse;

                border-collapse: collapse;

            }

            table td{

                height: 40px;

            }

            #btn{

                width: 100px;

                height: 40px;

                color: #3399cc;

                font-size: 18px;

            }

            table input{

                width: 80px;

                height: 30px;

            }

        </style>

    </head>

    <body>

        <div id="box">

            <input type="button" value="create" id="btn"/>

        </div>

        <script src="../js/common.js"></script>

        <script src="../js/table.js"></script>

        <script>

            //获得按钮

            var btn = my$("btn");

            //注册事件

            btn.onclick = function () {

                //创建一个tr

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

                var table = getLastElementChild(box);

                table.tBodies[0].appendChild(tr);

                //遍历头部数据 创建td

                for(var i =0;i<headers.length-1;i++){

                    //创建td

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

                    //追加到tr中

                    tr.appendChild(td);

                    //在td中添加文本框

                    td.innerHTML = "<input type='text'/>"

                }

                //创建td

                td = document.createElement("td");

                //追加到tr中

                tr.appendChild(td);

                //在td中添加a标签 且不可跳转

                td.innerHTML = "<a href='javascript:;'>确定</a> <a href='javascript:;'>取消</a>";

                //找到取消a标签

                var cancel = getLastElementChild(td);

                //注册事件

                cancel.onclick = function () {

                    //点击之后删除tbody中的tr

                    table.tBodies[0].removeChild(tr);

                };

                //找到确定按钮

                var ensure = getFirstElementChild(td);

                //给去掉按钮注册事件

                ensure.onclick = function () {

                    //定义td遍历

                    var td1,td2,td3,td4;

                    //找到tr中的第一个td

                    td1 = getFirstElementChild(tr);

                    //找到tr中的第一个td的下一个兄弟子元素

                    td2 = getNextElementSibling(td1);

                    //找到tr中的第二个td的下一个兄弟子元素

                    td3 = getNextElementSibling(td2);

                    //找到tr中的第三个td的下一个兄弟子元素

                    td4 = getNextElementSibling(td3);

                    //找到tr中的第一个td中的第一个子元素的value值

                    var name = getFirstElementChild(td1).value;

                    //找到tr中的第一个td的下一个兄弟子元素中的第一个子元素的value值

                    var department = getFirstElementChild(td2).value;

                    //找到tr中的第二个td的下一个兄弟子元素的第一个子元素的value值

                    var age = getFirstElementChild(td3).value;

                    //找到tr中的第三个td的下一个兄弟子元素的第一个子元素的value值

                    var salary = getFirstElementChild(td4).value;

                    //判断文本框是否为空

                    if(name.length===0||department.length===0||age.length===0||salary.length===0){

                        alert("文本框不能为空!!!请重新输入!!");

                    }else{

                        //不为空将数据添加到数组中去

                        datas.push({"name":name,"department":department,"age":age,"salary":salary});

                        //先删除之前的table

                        box.removeChild(table);

                        //重新调用函数创建一个新的函数

                        createTable(box,headers,datas);

                    }

                };

            };

            //表头数据

            var headers = ["姓名", "部门", "年龄","工资","操作"];

            //数据

            var datas = [

                {"name":"马闯","department":"行政","age":"18","salary":2000+"(元)"},

                {"name":"马户","department":"后勤","age":"19","salary":3000+"(元)"},

                {"name":"马伦","department":"技术","age":"15","salary":19000+"(元)"},

                {"name":"马尧","department":"服务","age":"16","salary":4000+"(元)"},

                {"name":"马震","department":"管理","age":"17","salary":16000+"(元)"},

                {"name":"马云","department":"财务","age":"20","salary":5000+"(元)"}

            ];

            var box = my$("box");
　　　　　　　　//调用函数

            createTable(box,headers,datas);

        </script>

    </body>

</html>

 /**

     * Created by Administrator on 2016/6/11.

     */

    function createTable(parentNode,headres,datas){

        //创建表格

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

        //将表格追加到父容器中

        parentNode.appendChild(table);

        //设置table的样式

        table.cellSpacing = 0;

        table.cellPadding = 0;

        table.border = "1px";

        //创建表头

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

        //将标题追加到table中

        table.appendChild(thead);

        //创建tr

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

        //将tr追加到thead中

        thead.appendChild(tr);

        //设置tr的样式属性

        tr.style.height="50px";

        tr.style.backgroundColor = "lightgray";

        //遍历headers中的数据

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

            //创建th

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

            //将th追加到thead中的tr中

            tr.appendChild(th);

            //将headers的数据找到对应的th放进去  此处 用到了setInnerText()函数 调用common.js

            setInnerText(th,headres[i]);

        }

        //创建tbodt

        createTbody(parentNode,table,datas);

    };

    function createTbody(parentNodes,table,datas){

        //创建tbody

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

        //将tbody追加到table中

        table.appendChild(tbody);

        //设置tbody的样式属性

        tbody.style.textAlign = "center";

        //遍历得到数据源

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

            //获取没想数据

            var data =datas[i];

            //创建tr

            tr = document.createElement("tr");

            //将tr追加到tbody中

            tbody.appendChild(tr);

            //设置tbody中tr的属性

            tr.style.height="40px";

            //遍历对象的属性

            for(var key in data){

                //创建td

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

                //追加到tbody中的tr中

                tr.appendChild(td);

                //将得到的没项属性添加到每一个td中

                setInnerText(td,data[key]);

            }

            //创建操作列

            td = document.createElement("td");

            //追加到tr中

            tr.appendChild(td);

            //给td设置a标签

            td.innerHTML = "<a href='javaScript:;'>删除</a>"

            //注册点击事件

            //找到a标签

            var link = td.children[0];

            //设置a便签的属性index为1

            link.index = i;

            //注册事件

            link.onclick = function () {

                //得到当前a标签的索引值

                var index = this.index;

                //删除该索引值的项

                datas.splice(index,1);

                //删除table

                parentNodes.removeChild(table);

                //重新创建table

                createTable(parentNodes,headers,datas);

            };

            //判断tr隔行变色

            //鼠标移动上去高亮显示

                    if(i%2==0){

                        //奇数行

                        tr.style.backgroundColor = "pink";

                    }else{

                        //偶数行

                        tr.style.backgroundColor = "#B9FFCF";

                    }

                    //注册事件高亮显示

                    var bg;

                    //鼠标经过

                    tr.onmouseover = function () {

                        bg = this.style.backgroundColor;

                        this.style.backgroundColor = "#4BE1FF";

                    };

                    //鼠标离开

                    tr.onmouseout = function(){

                        this.style.backgroundColor = bg;

                    };

        }

    };

JS动态创建table的更多相关文章

  1. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  2. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  3. js基础例子动态创建table实例

    <style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collaps ...

  4. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

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

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

  6. js动态创建及移除div的方法

    本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  7. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  8. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

  9. oaf 动态创建table vo (转)

    原文地址:如何动态创建table 需求: 因为系统中有几千个QA plan 但是不能手动创建几千个 质量收集页面所有需要根据 不同的plan 动态创建对应的 质量收集页面. 但是创建tabel 都要绑 ...

随机推荐

  1. Codeforces 339E

    #include <cstdio> #include <algorithm> #include <cmath> #include <cstring> # ...

  2. C4.5较ID3的改进

    1.ID3选择最大化Information Gain的属性进行划分   C4.5选择最大化Gain Ratio的属性进行划分 规避问题:ID3偏好将数据分为很多份的属性 解决:将划分后数据集的个数考虑 ...

  3. 初识Java--线程同步（2）

    本文讲述Java中的线程同步和生产者消费者问题,其中主要涉及线程同步和wait().notify()方法的用法. wait和notify方法只能用在线程同步中,wait和notify是object的方 ...

  4. Python实现CGI环境

    要想安装Python的CGI环境,就继续往下看吧. 首先,要确定apache服务可以使用CGI服务. 打开apache的配置文件,设置如图. 在启动的apache服务的系统目录下,创建目录如/User ...

  5. POJ3322-经典的游戏搜索问题

    临近毕业真是各种琐事多,好不容易写完几万字蛋疼的论文,又接着户口档案挂靠,毕业旅游,20多个离校盖章,签证被check了几个星期还没消息,希望8月初能走啊. 各种事情之下,人就是懒加心散,好久没写代码 ...

  6. 《think in python》学习-2

    高能提示:本文大量编程术语与释义,一些释义如有偏差恕不讨论. 变量,表达式 数据类型: print 4 #打印整数 int print 4.1#打印浮点数 float print "hell ...

  7. JavaScript小知识点（一）

     JavaScript 有3种方式定义对象 ①  var i = { function-x:function{ //todo }}; 这是通过Json方式定义一个函数对象. ②  function P ...

  8. 生成64位代码的mdb数据库连接串Provider的设置

    生成32位程序的mdb连接串的 Provider为:Provider=Microsoft.Jet.OLEDB.4.0 而生成64位代码时,则需要使用如下的 Provider Provider=Micr ...

  9. cookie的expires属性和max-age属性

    expires属性 指 定了coolie的生存期,默认情况下coolie是暂时存在的,他们存储的值只在浏览器会话期间存在,当用户推出浏览器后这些值也会丢失,如果想让 cookie存在一段时间,就要为e ...

  10. Guestinfo.hbm(1)The markup declarations contained or pointed to by the document type declaration must be well-formed

    今天启动ssh项目是居然报错了,还提示要联网启动,看了看错误信息发现,肯定是Hibernate映射文件的声明头出错了,仔细一下: hbm.xml中的dtd头直接是连接www.hibernate.org ...