JavaScript 添加删除记录

代码示例：

1 JS代码

1）声明myClick函数：

function myClick(id,fun){
       btn=document.getElementById(id);
       btn.onclick=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.onclick=delA;
       //td里增加a
       td.appendChild(a);
       //将td加到tr
       tr.appendChild(td);

       //增加行元素
       tab.appendChild(tr);

       //alert(allA.length);
   });

2.2 简化版：

3）删除

//得到A标签的数目
   var allA=document.getElementsByTagName('a');
   //alert(allA.length);
   for(var i=0;i<allA.length;i++){
       allA[i].onclick=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）运行结果：

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

JavaScript 添加删除记录

猜你喜欢