JS动态创建table

<!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;
                    };
        }
    };