<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
tr{
border: 0px;
}
</style>
<script type="text/javascript">
// page is loaded over the implementation of the window.onload JS
the window.onload = function () {
// execute 1. Click on the hyperlink to delete, delete information of an employee
// get all hyperlinks A
var alla = document.getElementsByTagName ( "A " );
// for each hyperlink click event binding function
for (i = 0; i <allA.length; i ++ ) {
var delA = function () {
// pop-up message box whether to delete
var TR = the this . parentNode.parentNode; // get TR
var name = tr.firstElementChild.innerText; // dynamic access to the name you want to delete
vars = confirm ( "Confirm Delete" + name + "?" );
IF (S == to true ) {
// delete the line, this is a point which the A
var TR = this .parentNode.parentNode; // get TR
TR .remove ();
}
// do not want the jump page appears by default behavior
return false ;
}
Any [in] .onclick = Share;
}
// 2. Add information to add employees to the table
var addEmpButton = document.getElementById ( "addEmpButton" );
addEmpButton.onclick = function () {
// Alert ( "the Hello");
// get employee information, the contents of the text box and he died value
var name = document.getElementById ( "empName" ) .Value;
var Email = document.getElementById ( "in Email" ) .Value;
var the salary = document.getElementById ( "the salary" ) .Value;
// save the acquired information to the tr in the same format
// Create tr
var tr = document.createElement ( "tr" );
// TR was added td
tr.innerHTML="<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td> <a href='javascript:;'> DELETE </a> </ td>"; // JavaScript :; not to jump
// get added a, its binding 1. Delete response function
var A = tr.getElementsByTagName ( "A") [0 ];
a.onclick = delA; // now delete function var a value of 1
// get the Table
var EmployeeTable = document.getElementById ( "EmployeeTable" );
// the Table has a default tbody
var tbody = employeeTable.getElementsByTagName ( "tbody" ) [0 ];
tbody.appendChild(tr);
}
}
</script>
</head>
<body>
<table id="employeeTable" border="" cellspacing="" cellpadding="">
<tr>
<td>Name</td>
<td>Email</td>
<td>Salary</td>
<td> </td>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">DELETE</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">DELETE</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">DELETE</td>
</tr>
</table>
<br /><br /><br />
<div id="formDiv" style="border: solid 1px black;width: 300px;">
<H4> Add new employee </ h4>
<table border="0px" cellspacing="" cellpadding="">
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" value="" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" value="" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" value="" />
</td>
</tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>