JS动态创建表格

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

复制代码

/**
* 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标签
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;
};
}
};