JavaScript 添加删除记录

以你之姓@ 2022-05-17 02:50 226阅读 0赞

代码示例：

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代码：

6）运行结果：

![70][]

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

[70]: /images/20220517/1dd2a46d38274a8da41a7733de9bb48b.png