您的位置：首页 > Web前端 > JavaScript

js节点对象操作--------输入个人信息加载表格中并实现删除功能

2019-01-24 20:21 429 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{text-decoration:none;}
div{margin:0px auto;height:25px;width:720px;}
table{width: 500px;border: 1px solid gray;border-collapse: collapse;margin:50px auto;}
th,td{line-height: 35px;border: 1px solid gray;text-align: center;}
</style>
</head>
<body>
<div>
<label for="on">姓名：</label><input type="text" id="on">
<label for="oa">年龄：</label><input type="text" id="oa">
<label for="oz">住址：</label><input type="text" id="oz">
<button id="bon">添加</button>
</div>
<script type="text/javascript">
//查找节点
var n1=document.getElementById('on');
var a1=document.getElementById('oa');
var z1=document.getElementById('oz');
var btn=document.getElementById('bon');
//添加点击事件
btn.onclick=function(){
//判断输入框是否为空
if(n1.value==''||z1.value==''||z1.value==''){
return;
}else{
document.body.appendChild(tbl);//将table追加到body中
var tr=gettr(n1.value,a1.value,z1.value,'删除',false);//输入内容
//清除输入框内容
n1.value='';
a1.value='';
z1.value='';
}
}
//创建table
var tbl=document.createElement('table');
//创建tr
var tr=gettr('姓名','年龄','住址','操作',true);
//创建行
function gettr(name,age,www,cz,bool,lei){
var otr=document.createElement('tr');
//创建列
if(bool){
var oth1=getth(name,false,'th');
var oth2=getth(age,false,'th');
var oth3=getth(www,false,'th');
var oth4=getth(cz,false,'th');
}else{
var oth1=getth(name,false,'td');
var oth2=getth(age,false,'td');
var oth3=getth(www,false,'td');
var oth4=getth(cz,true,'td');
}
//将列追加到行中
otr.appendChild(oth1);
otr.appendChild(oth2);
otr.appendChild(oth3);
otr.appendChild(oth4);

tbl.appendChild(otr);//将tr追加到table中
return otr;
}
//创建列
function getth(content,sl,lei){
var oth=document.createElement(lei);
if (sl) {
//创建a链接
var aa=document.createElement('a');
aa.innerHTML=content;//为a链接添加内容
aa.href='#';//为链接添加属性
//为链接添加点击事件
aa.onclick=function(){
if(confirm('是否删除?')){//判断是否删除
var tth=this.parentNode.parentNode;
tth.parentNode.removeChild(tth);
}
}
oth.appendChild(aa);//将a链接追加到列中
}else{
oth.innerHTML=content;//为列附加内容
}
return oth;//返回值到列
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航