表格增加和删除指定行

效果图


题目：按create键将上面填写的相应信息增加到表格中，按delete键将指定行删除。

整体思路：

1. 先用HTML将文档写好，创建三个input输入框和一个create按钮以及一个table表格。
2. 添加信息。 然后用JS通过document.getElementById()拿到相应的文本框的值，在create按钮上添加一个onclick()事件来动态增加表格的行和列。首先var oTr=document.createElement('tr');创建一行，然后用var oTd=document.createElement('td')创建四列，把每个文本框的值通过oTd.innerHTML来加到列中，再通过oTr.appendChild(oTd)将相应列增加到一行中，最后通过tabEle.appendChild(oTr)将行增加到表格中。
3. 删除指定行。只需要在创建的按钮后面写一个onclick()事件，通过oTr.remove(this);来删除指定行，this代表本行。

特别注意的是：

创建按钮时的写法为：

var oTd=document.createElement('td');
var button=document.createElement('button');
button.onclick=function(){
        oTr.remove(this);
    }
var text=document.createTextNode('delete');
button.appendChild(text);
oTd.appendChild(button);
oTr.appendChild(oTd);

而不能像下面这样写：

var deleEle=document.createElement("input");
 deleEle.type="button";
 deleEle.value="delete";
oTd.appendChild(deleEle);

否则只有最后一行才能添加上按钮，前面创建的按钮会自动消失，注意语法规则。

整体代码如下：

    

    
        
        
        
    
    
        

            Name:

            Age:

            Sex:

            

            
            

                
Name
Age
Sex
delete