使用DOM节点的动态添加和删除向表格中插入删除数据

要求

在文本输入框中输入姓名、年龄、班级和手机号，并选择性别

点击插入数据按钮，将输入框中的数据插入到表格中

点击每条数据后面的删除按钮，将删除该条数据

思路

绘制表格，添加四条虚拟数据，在每条数据后使用超链接，并且添加超链接的点击事件

在页面中添加文本输入框和选项菜单，并提示用户输入，添加插入数据按钮，并添加点击事件

在插入数据按钮的事件处理函数中，使用document对象的getElementById、getElementsByTagName等属性获取输入框的值

使用createElement创建元素，使用innerHTML为元素设置文本，使用appendChild将创建的元素添加到table中

在删除超链接的事件处理函数中，获取超链接的父节点td，继续获取父节点tr，在获取父节点table，然后将table节点中的tr节点删除

    <table border="1" id="tb" >
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>25</td>
            <td>计算机1班</td>
            <td>139xxxx0987</td>
            <td><a href="#" onclick="del">删除</a></td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>24</td>
            <td>计算机2班</td>
            <td>136xxxx8766</td>
            <td><a href="#" onclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>26</td>
            <td>软件1班</td>
            <td>199xxxx8866</td>
            <td><a href="#" onclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>女</td>
            <td>23</td>
            <td>软件2班</td>
            <td>188xxxx8996</td>
            <td><a href="#" onclick="del(this)">删除</a></td>
        </tr>
    </table>
    <p>
        <input type="text" id="name" placeholder="请输入姓名" value="" />
        <select name="">
            <option value="">男</option>
            <option value="">女</option>
        </select>
        <input type="text" id="age" placeholder="请输入年龄"/>
        <input type="text" id="cls" placeholder="请输入班级"/>
        <input type="text" id="mobile" placeholder="请输入手机号"/>
        <input type="button" value="插入数据" onclick="insert()"/>
    </p>

    <script type="text/javascript">
        function insert(){
            var sel=document.getElementsByTagName("select")[0];
            var gender=sel.options[sel.selectedIndex].text;
            var age=document.getElementById("age").value;
            var cls=document.getElementById("cls").value;
            var mobile=document.getElementById("mobile").value;
            var name=document.getElementById("name").value;
            var array=new Array(name,gender,age,cls,mobile);
            var tb=document.getElementById("tb");
            var cols=tb.getElementsByTagName("th");
            var newtr=document.createElement("tr");
            for(var i=0;i<cols.length;i++){
                if(i==cols.length-1){
                    var td=document.createElement("td");
                    var a=document.createElement("a");
                    a.innerHTML="删除";
                    a.onclick=function(){
                        a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
                        
                    }
                    a.setAttribute("href","#");
                    td.appendChild(a);
                    newtr.appendChild(td);
                    
                }else{
                        var td=document.createElement("td");
                        td.innerHTML=array[i];
                        newtr.appendChild(td);
                }
                
            }
            tb.appendChild(newtr);
        }
        function del(obj){
            var tr=obj.parentNode.parentNode;
            if(tr!=null){
                tr.parentNode.removeChild(tr);
            }
        }
    </script>