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