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