js实现表格
使用js和函数实现表格
1.用js代码实现以上结构
2.用函数实现(封装)
3.思考题：
点击‘删除’按钮，删除该行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
table{width: 500px;margin: 50px auto;border: 1px solid gray;border-collapse: collapse;}
tr th,tr td{line-height: 35px;border: 1px solid gray;text-align: center;}
</style>
</head>
<body>
<script type="text/javascript">
//1.创建表格
var tab =document.createElement('table');
//2.创建标题
var cap=document.createElement('caption');
cap.innerHTML='员工信息表';
tab.appendChild(cap);
//3.创建表头
var thead=document.createElement('thead');
//表头行
var haed_tr=createTr(true,'th','编号','姓名','性别');
//将行添加到head中
thead.appendChild(haed_tr);
tab.appendChild(thead);
//4.添加表格内容
var tbody=document.createElement('tbody');
//创建行
var tr1=createTr(false,'td','1000','王五','男');
var tr2=createTr(false,'td','1001','Tom','男');
var tr3=createTr(false,'td','1002','Lucy','女');
//将行放入tbody中
tbody.appendChild(tr1);
tbody.appendChild(tr2);
tbody.appendChild(tr3);
tab.appendChild(tbody);
//将表格添加页面中
document.body.appendChild(tab);
//创建行 isHead true 表头行 false 普通行
function createTr(isHead,tagName,id,name,sex){
//创建内容行
var tr=document.createElement('tr');
var td1=createCell(id,false,tagName);
var td2=createCell(name,false,tagName);
var td3=createCell(sex,false,tagName);
var td4;
if(isHead){
td4=createCell('操作',false,tagName);//表头
}else{
td4=createCell('删除',true,tagName);//普通行
}
//将列添加到航捏
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
return tr;
}
//创建列(单元格) isLink true 最后一行(删除)
function createCell(value,isLink,tagName){
var cell=document.createElement(tagName);
//若为最后一列，删除功能(添加超链接)
if(isLink){
var link=document.createElement('a');
link.href='#';
link.innerHTML=value;
link.function () {
//父节点 删除子节点
// tbody.removeChild(tr);
//this 当前对象 事件触发者
var tr=this.parentNode.parentNode;
tr.parentNode.removeChild(tr);
};
cell.appendChild(link);
}else{
cell.innerHTML=value;//普通列
}
return cell;
}
</script>
</body>
</html>
