DOM--dom生成表格

实现以下三点：

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').οnclick=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.οnclick=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>

见下图：