Add an example to remove a table

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.