table{width: 500px;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;}
th,td{line-height: 35px;text-align: center;border: 1px solid gray;}
姓名:
年龄:
住址:
添加
//获取id
var t1=document.getElementById('txt1');
var t2=document.getElementById('txt2');
var t3=document.getElementById('txt3');
var btn=document.getElementById('btn');
//创建table
var tab=document.createElement('table');
//创建tr
var tr=document.createElement('tr');
//创建th
var th1=document.createElement('th');
var th2=document.createElement('th');
var th3=document.createElement('th');
var th4=document.createElement('th');
//添加th内容
th1.innerHTML='姓名';
th2.innerHTML='年龄';
th3.innerHTML='住址';
th4.innerHTML='操作';
//把th放入tr中
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
tr.appendChild(th4);
//把tr放入table中
tab.appendChild(tr);
btn.οnclick=function(){
if(t1.value==''||t1.value==''||t3.value==''){
alert('输入框不能为空');
return;
}
var tr0=getTr(t1.value,t2.value,t3.value);
tab.appendChild(tr0);
//把表格放入body中
document.body.appendChild(tab);
//输入后清空输入框
t1.value='';
t2.value='';
t3.value='';
};
function getTr(name,age,add,link){
//创建tr
var tr=document.createElement('tr');
//创建td
var td1=document.createElement('td');
var td2=document.createElement('td');
var td3=document.createElement('td');
var td4=document.createElement('td');
var a=document.createElement('a');
//添加th内容
td1.innerHTML=name;
td2.innerHTML=age;
td3.innerHTML=add;
a.innerHTML='删除';
a.href="#";
//添加删除事件
a.οnclick=function(){
if(confirm('是否确认删除?')){
tab.removeChild(this.parentNode.parentNode);
}
};
//把td放入tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
td4.appendChild(a);
//把tr放入table中
return tr;
}