javascript动态创建table

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

 

转载于:https://www.cnblogs.com/610553824lyx/p/6861843.html