1.写真を見る
2.すべてのコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#employeeTable{
background-color: blue;
border-spacing: 1px;
margin: 80px auto 10px auto;
}
#formDiv {
width: 250px;
border-style: solid;
border-color: #0000FF;
margin: 50px auto 10px auto;
border-width: 1px;
padding: 10px;
}
th,td{
background-color: wheat;
}
.word {
width: 40px;
}
.inp {
width: 200px;
}
</style>
</head>
<body>
<table id="employeeTable">
<tr>
<th>name</th>
<th>email</th>
<th>salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@t.com</td>
<td>60000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Yandx</td>
<td>yandx@yan.com</td>
<td>40000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新成员</h4>
<table>
<tr>
<td id="word">name:</td>
<td id="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function myClick(idstr, fun){
var btn = document.getElementById(idstr);
btn.onclick = fun;
}
var btn = document.getElementsByTagName("a");
for(let i=0;i<btn.length;i++){
btn[i].onclick = function(){
let tr = this.parentNode.parentNode;
let res = confirm("确认删除吗"+tr.children[0].innerHTML);
if(res){
tr.parentNode.removeChild(tr);
}
return false;
};
}
myClick("addEmpButton",function(){
let tabl = document.querySelectorAll("#employeeTable")[0];
let name = document.querySelector("#empName").value;
let emai = document.querySelector("#email").value;
let salary = document.querySelector("#salary").value;
let td_name = document.createElement("td");
let td_email = document.createElement("td");
let td_salary = document.createElement("td");
let td_del = document.createElement("td");
console.log(name);
td_name.innerHTML = name;
td_email.innerHTML = emai;
td_salary.innerHTML = salary;
td_del.innerHTML = '<a href="javascript:;">Delete</a>';
let tab = document.querySelector("#employeeTable tbody");
let trr = document.createElement("tr");
trr.appendChild(td_name);
trr.appendChild(td_email);
trr.appendChild(td_salary);
trr.appendChild(td_del);
tab.appendChild(trr);
td_del.children[0].onclick = function(){
let tr = this.parentNode.parentNode;
let res = confirm("确认删除吗"+tr.children[0].innerHTML);
if(res){
tr.parentNode.removeChild(tr);
}
return false;
};
});
</script>
</body>
</html>