实现以下三点:
1.通过DOM生成表格
2.点击“添加”按钮,在表格中插入数据(备注:若页面中无表格,创建表格)
3.点击“删除”按钮,删除该人员
js代码和html代码:
<div id='box'>
<label for="">姓名:</label><input type="text" name="" id='txt-name'>
<label for="">年龄:</label><input type="text" name="" id='txt-age'>
<label for="">住址:</label><input type="text" name="" id='txt-address'>
<button type="" id='btn'>点击</button>
<script type="text/javascript">
//查找对象
var element=document.getElementById('box');
var nam=document.getElementById('txt-name');
var age=document.getElementById('txt-age');
var address=document.getElementById('txt-address');
//创建一个表格对象
var tab=document.createElement('table');
//添加标题
var cap=document.createElement('caption');
cap.innerHTML='员工信息表';
tab.appendChild(cap);
//添加表头
var headTr=createTr('姓名','年龄','住址',true);
tab.appendChild(headTr);
//添加点击事件
document.getElementById('btn').onclick=function(){
var pName=nam.value;
var pAge=age.value;
var pAddress=address.value;
if(pName==""|pAge==""|pAddress==""){
alert('重新输入');
return;//结束函数
}
var tr1=createTr(pName,pAge,pAddress,false);
tab.appendChild(tr1);
//将表格显示在页面中
element.appendChild(tab);
//清空输入框
nam.value='';
age.value='';
address.value='';
}
/*
创建行,包含四列,content,cont2,cont3,isTrue用于判断最后一列的内容
*/
function createTr(cont1,cont2,cont3,isTrue){
var tr=document.createElement('tr');
//创建列
var td1=createTd(cont1,isTrue);
var td2=createTd(cont2,isTrue);
var td3=createTd(cont3,isTrue);
var td4=document.createElement('td');
if(!isTrue){
var _link=document.createElement('a');
_link.href='#';
_link.innerHTML='删除';
td4.appendChild(_link);
td4.onclick=function(){
td4.parentNode.parentNode.removeChild(td4.parentNode);
}
}else{
td4.innerHTML='操作';
}
//将列添加到行内
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
return tr;
}
//创建列
function createTd(cont,isTrue){
var td;//判断isTrue是否为真,如果为真,则最后一列为‘th’,否则为‘td’
if(isTrue){
td=document.createElement('th');
}else{
td=document.createElement('td');
}
td.innerHTML=cont;
return td;
}
</script>
</div>
css代码:
<style type="text/css">
#box{
width:800px;
margin:100px auto;
}
table{width: 500px;border: 1px solid gray;border-collapse: collapse; margin-top:20px;}
table th,table td{line-height: 30px;text-align: center;border: 1px solid gray;}
</style>
见下图: