<!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. 50% 的财富 500 强企业使用 Windows Azure

    在上周的北美TechEd大会上,我有幸见到了来自世界各地的客户.合作伙伴和分析师,其数量之多,让人震惊.没有什么比亲耳聆听使用 Windows Azure 来开创新天地的客户亲口讲述他们的故事更令人振 ...

  2. Windows Azure 社区新闻综述（#68 版）

    欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话. 以下是过去一周基于您的反馈汇集在一起的内容: 文章.视频和博客文章 在 Windows Az ...

  3. C_const

    const * const在*左边,指向一个常量. * const const在*右边,指针是常量. 1 const int *p;//指向常量的指针,与下面一样 2 int const *p1;// ...

  4. 动画原理——线性来回运动&&波动

    书籍名称:HTML5-Animation-with-JavaScript 书籍源码:https://github.com/lamberta/html5-animation 1.在正选函数中,随角度的增 ...

  5. SQL Server执行计划那些事儿（2）——查找和扫描

    接下来的文章是记录自己曾经的盲点,同时也透漏了自己的发展历程(可能发展也算不上,只能说是瞎混).当然,一些盲点也在工作和探究过程中慢慢有些眉目,现在也愿意发扬博客园的奉献精神,拿出来和大家分享一下. ...

  6. 使用关联对象（AssociatedObject）为UIButton添加Block响应

    在开发中,要给UIButton添加点击事件的话,通常的做法是这样的 UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; [ ...

  7. ORA-04031: 无法分配 共享内存

    今天现场项目oracle系统定时器插入数据报错: --ORA-04031: 无法分配 3936 字节的共享内存 ("shared pool","truncate tabl ...

  8. ORA-01157报错"cannot identify/lock data file"解决

    sqlplus以管理员方式接入数据库,启动时出现报错,如下: > sqlplus "/as sysdba" SQL> startup ...... ORA-01157: ...

  9. 内存管理——Cocos2d-x学习历程(五)

    Cocos2d-x采用了引用计数与自动回收的内存管理机制. 1.每个对象包含一个用来控制生命周期的引用计数器,它就是CCObject的成员变量m_u- Reference.我们可以通过retainCo ...

  10. PHP比较全的友好的时间显示，比如‘刚刚’，'几秒前'等

    分享一个php友好的比较完成的时间格式化函数,包括‘刚刚’,'几秒之前',‘几分钟前’,'几小时前',几天前,几周前,几个月前等.调用方式很简单,是从ThinkSNS 里面拿出来的. /** * 友好 ...