Add the Onclick response function for all the a nodes of the #employeetable:
* 1. Pop-Up confirmation dialog: Are you sure you want to delete xx information? XX is the TR of the TD where the current a node is located
* The text value of the first TD child node, and to remove the front and back spaces
* 2. If you click "Confirm", delete the row where the A node is located
Attention:
* 1. A node is a hyperlink that can cancel the default behavior by returning false in its OnClick event
* 2. The direct parent node of TR is tbody, not table
* 3. You can write a trim (str) function to the code that removes the space before and after it.
Add the onclick response function for the #addEmpButton:
* 1. Gets the value of the #name, #email, #salary text box
* 2. Creates 3 TD nodes with the text value obtained from 1, creating a TR node. And put the above 3 TD
* Node price TR Node Sub-node
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
</tr>
* 3. When creating a TD node: <td><a href= "Deleteemp?id=xxx" >Delete</a></td>
* 4. The TD created with 3 is also added as a sub-node of tr.
* 5. The TR is then added as a child node of the Tbody child node of the #employeetable.
* 6. Add the Onclick response function to the a child node of the newly created TR so that it also has the ability to delete.
function Removetr (Anoe) {
var trnode = ANoe.parentNode.parentNode;
var textcontent = trnode.getelementsbytagname ("TD") [0]
. Firstchild.nodevalue;
Textcontent = Trim (textcontent);
var flag = confirm ("OK to delete" + textcontent + "information?");
if (flag) {
TrNode.parentNode.removeChild (Trnode);
}
return false;
}
1. A node is a hyperlink that can cancel the default behavior by returning false in its OnClick event
var anodes = document.getElementById ("employeetable")
. getElementsByTagName ("a");
for (var i = 0; i < anodes.length; i++) {
Anodes[i].onclick = function () {
REMOVETR (this);
return false;
}
}
document.getElementById ("Addempbutton"). onclick = function () {
var nameval = document.getElementById ("name"). Value;
var emailval = document.getElementById ("email"). Value;
var salaryval = document.getElementById ("Salary"). Value;
var nametd = document.createelement ("TD");
Nametd.appendchild (document.createTextNode (nameval));
var Emailtd = document.createelement ("TD");
Emailtd.appendchild (document.createTextNode (emailval));
var salarytd = document.createelement ("TD");
Salarytd.appendchild (document.createTextNode (salaryval));
var tr = document.createelement ("tr");
Tr.appendchild (NAMETD);
Tr.appendchild (EMAILTD);
Tr.appendchild (SALARYTD);
Alert ("AA");
<td><a href= "Deleteemp?id=xxx" >Delete</a></td>
var anode = document.createelement ("a");
Anode.href = "Deleteemp?id=xxx";
Anode.appendchild (document.createTextNode ("Delete"));
var aTd = document.createelement ("TD");
Atd.appendchild (anode);
Tr.appendchild (ATD);
Anode.onclick = function () {
REMOVETR (this);
return false;
}
document.getElementById ("EmployeeTable")
. getElementsByTagName ("tbody") [0]
. appendchild (TR);
Value: Used to get the values of an HTML form element
alert (this.value); //
NodeValue: The text value used to get the text node.
alert (This.nodevalue); Null
}
function Trim (str) {
var reg =/^\s*|\s*$/g;
Return Str.replace (Reg, "");
}
Add an example to remove a table