<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
#table1,#table2{
border-style: solid;
}
#table1 th{
border-style: solid;
width: 50px;
}
#table1 td{
border-style: solid;
}
</style>
<body>
<center>
<table id="table1">
<tr>
<th>Name</th>
<th>sex</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>3000</td>
<td><button class="btn">删除</button></td>
</tr>
</table>
<table id="table2">
<tr>
<th>添加新员工</th>
</tr>
<tr>
<td>name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>sex:</td>
<td><input type="text" id="sex"></td>
</tr>
<tr>
<td>Salary:</td>
<td><input type="text" id="salary"></td>
</tr>
<tr>
<td><button id="btn1">submit</button></td>
</tr>
</table>
</center>
</body>
</html>
<script type="text/javascript">
window.onload=function () {
var btn=document.getElementsByClassName("btn");
for(var i=0;i<btn.length;i++){
btn[i].onclick=function () {
var tr=this.parentNode.parentNode;
var name=tr.getElementsByTagName("td")[0].innerHTML;
var flag= confirm("确定删除"+name+"吗?");
if(flag==true){
tr.parentNode.removeChild(tr);}
}
}
var btn1=document.getElementById("btn1");
btn1.onclick=function () {
var table1=document.getElementById("table1");
var name=document.getElementById("name").value;
var sex=document.getElementById("sex").value;
var salary=document.getElementById("salary").value;
var tr=document.createElement("tr");
var nametd=document.createElement("td");
var sextd=document.createElement("td");
var salarytd=document.createElement("td");
var blanktd=document.createElement("td");
var buttonx=document.createElement("button");
buttonx.innerHTML="删除";
buttonx.onclick=function(){
var tr=this.parentNode.parentNode;
var name=tr.getElementsByTagName("td")[0].innerHTML;
var flag= confirm("确定删除"+name+"吗?");
if(flag==true){
tr.parentNode.removeChild(tr);}
}
nametd.innerHTML=name;
sextd.innerHTML=sex;
salarytd.innerHTML=salary;
blanktd.appendChild(buttonx);
tr.appendChild(nametd);
tr.appendChild(sextd);
tr.appendChild(salarytd);
tr.appendChild(blanktd);
table1.appendChild(tr);
}
}
</script>
html js之实现简单的增删功能
最新推荐文章于 2024-06-24 10:30:37 发布