<!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. Delphi XE6调用javascript

    原文地址:Example of using JavaScript for Google maps in the Delphi XE6   XE6的TWebBrowser新增了EvaluateJavaS ...

  2. 大型项目使用Automake/Autoconf完成编译配置

    http://www.cnblogs.com/xf-linux-arm-java-android/p/3590770.htmlhttp://blog.csdn.net/zengraoli/articl ...

  3. 【HDU】1717 小数化分数2 ——计数原理

    小数化分数2 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  4. Recover a file when you use git reset head by mistake.

    $ git init Initialized empty Git repository in .git/ $ echo "testing reset" > file1 $ g ...

  5. SEO人员应该突破的5大思想误区

    1.外链误区 很多人在做网站优化的时候容易陷入外链怪圈,认为外链就是网站优化的一切,只要做好外链排名就会上去,让他不做外链了他将不知道做什么.特别是外链专员和一些初级SEO人员,优化网站只知道到哪里发 ...

  6. mantis 中文统计报表乱码问题解决办法

    mantis 中文报表乱码问题 1.安装mantisTB 1.2.17:a.安装插件:管理-->插件管理-->安装MantisGraph(Mantis图表 1.0) 插件b.修改配置文件: ...

  7. JavaScript习题

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. Python核心编程读笔 13：执行环境

    第14章  执行环境 一.可调用对象 python有四种可调用对象:函数.方法.类.一些类的实例 1 函数 (1)内建函数(BIF) BIF是用c/c++写的,编译后放入python解释器,然后把它们 ...

  9. hdu1238--Substrings

    暴力求解 题意:求一个公共子串的最大长度,反转的公共子串存在也算. 求解思路:先找出最短的字符串进行暴力枚举.每截取一个子串后,求出它的反转字符串,然后检验这两个子字符串是否存在输入的字符串组中,每个 ...

  10. 关于yii2的gridview关联搜索步骤

    在使用yii2构建搜索视图,经常都会使用到gridview这个组件,这个组件十分强大,通过一定的配置就能进行关联搜索,下面就是简单的步骤 需求场景:一个车系表,里面存放在品牌表的id,现在要用品牌名字 ...