Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
#box {
margin:0 Auto;
Background:yellow;
BORDER:4PX double #808080;
width:600px;
Text-align:center;
}
#box input{
width:130px;
}
#box table{
margin:5px 0;
Background:lawngreen;
}
</style>
<script type= "Text/javascript" >
onload = function () {
var ainput = document.getelementsbytagname (' input ');
var bTn = document.getElementById (' bTn ');
var table = document.getelementsbytagname (' table ') [0];
//
Method One
Btn.onclick = function () {
var otr=document.createelement (' tr ');//Create a node to create a new TR
Table.appendchild (oTr);//Add TR to table
var otd1=document.createelement (' TD ');//Create a node create a new TD
otd1.innerhtml=ainput[0].value;//to the first TD to assign the contents of the first input
Otr.appendchild (OTD1);//Add TD1 to TR
var otd2=document.createelement (' TD ');//Create a node create a new TD
otd2.innerhtml=ainput[1].value;//to the second TD to assign the second input content
Otr.appendchild (OTD2);//Add TD2 to TR
var otd3=document.createelement (' TD ');//Create a node create a new TD
otd3.innerhtml=ainput[2].value;//third input content to third TD
Otr.appendchild (OTD3);//Add TD3 to TR
var otd4=document.createelement (' TD ');//Create a node create a new TD
Otd4.innerhtml= ' <a href= "javascript:;" > Delete </a> ';//assign content to table
Otr.appendchild (OTD4);//Add TD4 to TR
Otd4.getelementsbytagname (' a ') [0].onclick=function () {
Table.removechild (This.parentNode.parentNode);
Remove the child nodes under table tr
This.parentNode.parentNode is the parent of the parent of the trigger object A.
}//Delete a table row
Method Two
Btn.onclick = function () {
//
var otr=document.createelement (' tr ');//Create Node
Table.appendchild (oTr);//Create a child node of table TR
for (var i = 0; i < ainput.length-1; i + +) {
var otd=document.createelement (' TD ');//Create Node
otd.innerhtml=ainput[i].value;//assigning content to a table
Otr.appendchild (oTd);//Create a TR sub-node TD
//}
//
var otd=document.createelement (' TD ');//Create Node
Otd.innerhtml= ' <a href= "javascript:;" > Delete </a> ';//assign content to table
Otr.appendchild (oTd);//Create a TR sub-node TD
//
Otd.getelementsbytagname (' a ') [0].onclick=function () {
Table.deleterow (1);
//}
}
}
</script>
<body>
<div id= "box" >
<form action= "" method= "POST" >
Id:<input type= "text" name= "" id= "" value= ""/>
Name: <input type= "text" name= "" id= "" value= ""/>
Tel: <input type= "text" name= "" id= "" value= ""/>
<input type= "reset" name= "btn" id= "btn" value= "Save" style= "width:50px;" />
</form>
<table border= "" cellspacing= "" cellpadding= "" width= "600px" >
<tr>
<td>Id</td>
<td>name</td>
<td>tal</td>
<td> Operations </td>
</tr>
</table>
</div>
</body>
Native JS Implementation Dynamic table (add, delete)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
