console
function delA(){
var allA = document.getElementsByTagName('a');
for(var i = 0;i < allA.length;i++){
allA[i].onclick = function(){
var tr = this.parentNode.parentNode;
var td = tr.getElementsByTagName('td');
var name = td[0].innerHTML;
console.log(name);
if(confirm('您确认要删除' + name + '?'))
tr.parentNode.removeChild(tr);
return false;
}
}
}
var btn = document.getElementById('btn');
btn.onclick = function(){
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var salary = document.getElementById('salary').value;
var tr = document.createElement('tr');
tr.innerHTML = "<td>" + name+ "</td><td>" + email+ "</td><td>" + salary + "</td><td><a href='#'>delete</a></td>";
var employeeTable = document.getElementById('employeeTable');
employeeTable.appendChild(tr);
delA();
}
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th>删除</th>
</tr>
<tr>
<td>tom</td>
<td>1399@qq.com</td>
<td>3000</td>
<td><a href="#">delete</a></td>
</tr>
<tr>
<td>jack</td>
<td>1219@qq.com</td>
<td>3030</td>
<td><a href="#">delete</a></td>
</tr>
<tr>
<td>siri</td>
<td>2211@qq.com</td>
<td>4000</td>
<td><a href="#">delete</a></td>
</tr>
</table>
<div id="addcontext">
<h4>添加员工记录</h3>
<table>
<tr>
<td>name:</td>
<td><input type="text" id="name" value="name"></td>
</tr>
<tr>
<td>email:</td>
<td><input type="text" id="email" value="email"></td>
</tr>
<tr>
<td>salary:</td>
<td><input type="text" id="salary" value="salary"></td>
</tr>
<tr><td><input type="submit" value="添加" id="btn"></td></tr>
</table>
</div>
#employeeTable{
border: 1px solid black;
padding: 5px;
margin-bottom: 10px;
}
#employeeTable table{
}
#addcontext{
border: 1px solid black;
padding: 5px;
margin-top: 10px;
}
input[type=submit]{
margin-top: 10px;
margin-left: 100%;
}