JavaScript 添加删除记录

代码示例：

1 JS代码

1）声明myClick函数：

function myClick(id,fun){
           btn=document.getElementById(id);
           btn.οnclick=fun;
       }

 2）添加：

 2.1 复杂版：

 myClick("btn",function(){
         //得到输入元素
           var name1=document.getElementById("name");
           var age1=document.getElementById("age");
           var job1=document.getElementById("job");
           //alert(name1.value);
           var p={name:name1.value, age:age1.value, job:job1.value};
          //创建新的表格节点
           var tr=document.createElement("tr");
          //得到父节点
           var tab=document.getElementById("tb");
           for(i in p){
           //创建新的表格节点
           var td=document.createElement("td");
           //向td中填入元素
           td.innerHTML=p[i];
           tr.appendChild(td);
          } 
          //得到父节点
          var tab=document.getElementById("tb");
          //得到tbody内的tr个数
          var trCount=tab.querySelectorAll("tr").length;
          //创建新的表格节点
          var td=document.createElement("td");
          var a=document.createElement("a");
          a.setAttribute("href",(trCount+1));
          a.innerText="删除";
          //绑定删除函数
          a.οnclick=delA;
          //td里增加a
          td.appendChild(a);
          //将td加到tr
          tr.appendChild(td);
         
           //增加行元素
          tab.appendChild(tr);    
         
          //alert(allA.length);
       });

2.2 简化版：

 myClick("btn",function(){
         //得到输入元素
           var name1=document.getElementById("name");
           var age1=document.getElementById("age");
           var job1=document.getElementById("job");
           //alert(name1.value);
           var p={name:name1.value, age:age1.value, job:job1.value};
          //创建新的表格节点
           var tr=document.createElement("tr");
         //得到父节点
           var tab=document.getElementById("tb");
          //得到tbody内的tr个数
          var trCount=tab.querySelectorAll("tr").length;
           tr.innerHTML="<td>"+p.name+"</td>"+
                          "<td>"+p.age+"</td>"+
                          "<td>"+p.job+"</td>"+
                          "<td><a href='"+(trCount+1)+"'>删除</a></td>";
            var a=tr.getElementsByTagName("a")[0];
            a.οnclick=delA;
         
           //增加行元素
          tab.appendChild(tr);    
         
          //alert(allA.length);
       });

3）删除

//得到A标签的数目
       var allA=document.getElementsByTagName('a');
       //alert(allA.length);
       for(var i=0;i<allA.length;i++){
           allA[i].οnclick=delA;
       }

其中delA函数为一个全局函数，定义为：

//全局函数 简化下面的书写负担
function delA(){
      //this指的是超连接 获取所在的tr
      var tr=this.parentNode.parentNode;
      //获得name
      //var name=tr.children()[0];
      var name=tr.getElementsByTagName("td")[0].innerHTML;
      var flag=confirm("要删除"+name+"吗？");
      if(flag){
          tr.parentNode.removeChild(tr);
      }
      return false;//不让连接跳转
 };

4）HTML代码：

<table id="tab">
   <thead>
        <tr>
         <th>name</th>
         <th>age</th>
         <th>job</th>
      </tr>
   </thead>
   <tbody id="tb">
      
      <tr>
         <td>name1</td>
         <td>1</td>
         <td>job1</td>
         <td><a href="1">删除</a></td>
      </tr>
      <tr>
         <td>name2</td>
         <td>2</td>
         <td>job2</td>
         <td><a href="3">删除</a></td>
      </tr>
      <tr>
         <td>name3</td>
         <td>3</td>
         <td>job3</td>
         <td><a href="2">删除</a></td>
      </tr>
   </tbody>
</table>
<br>
<table id="tab1">
   <thead>
        <tr>
         <th>添加用户</th>
      </tr>
   </thead>
   <tbody id="tb">
      
      <tr>
         <td>name:<input type="text" id="name"></td>
      </tr>
      <tr>
         <td>age:<input type="text" id="age"></td>
      </tr>
      <tr>
         <td>job:<input type="text" id="job"></td>
      </tr>
      <tr>
        <td><button id="btn">submit</button></td>
        
      </tr>
   </tbody>
</table>

5）CSS代码：

<style type="text/css">
   *{
     margin:0px;
     padding:0px;
   }
   #tab{
       width:300px;
       margin:50px auto;
       padding:10px;
       background-color:yellow;
       text-align:center;
       border-style: solid; border-width: 5px;
   }
   #tab1{
       width:200px;
       margin:50px auto;
       padding:10px;
       background-color:yellow;
       text-align:center;
       border-style: solid; border-width: 5px;
   }
  
</style>

6）运行结果：

本代码没有对用户输入的内容进行验证，望读者自行思考添加！