fill in the upper text box with "name/email/age" to enable the dynamic addition or deletion of cells in the table below Effect:
1. html code:
<body>
<p align= "center" id= "info" >
name: <input type= "text" id = "username" >
Email: < Input type= "text" id = "Email" >
Age: <input type= "text" id = "Age" >
</p>
<div align= "Center "><input type=" button "value=" Add "onclick=" AddRow () "></div>
2. JavaScript code:
<script type= "Text/javascript" >//Three text box//A Add Button button implementation function add info to table///table, row number dynamic increase Fu
Nction AddRow () {//Get INPUT element node array var inputnodes = document.getElementsByTagName ("input");
var str = new String (inputnodes[0].value);
var str1 = new String (inputnodes[1].value);
var str2 = new String (inputnodes[2].value); if ((Str.length > 0) && (str1.length > 0) && (str2.length > 0)) {//Tim
Add a row of InsertRow () method to insert a new row var newtr = Testtble.insertrow () at a specified position in the table.
Add the four column Sertcell () method to insert an empty <td> element var newTd0 = Newtr.insertcell () at the specified position in the HTML table's row.
var newTd1 = Newtr.insertcell ();
var newTd2 = Newtr.insertcell ();
var newTd3 = Newtr.insertcell ();
Assigning value newtd0.innertext= inputnodes[0].value to each column respectively;Newtd1.innertext= Inputnodes[1].value;
Newtd2.innertext= Inputnodes[2].value;
newtd3.innerhtml = "<input type= ' button ' value= ' delete ' onclick= ' deletetable (this) ' >"; else {alert ("Please complete the information first.")
");
Return } function Deletetable (r) {//Get current table row number var i = R.PARENTNODE.PARENTNODE.R
Owindex;
Call DeleteRow () to delete the bank document.getElementById (' testtble '). DeleteRow (i); } </script>