Home > Developer > JavaScript
Use JavaScript to add or delete tables dynamically. use javascript to add or delete tables.
Enter "name/Email/age" in the text box above to add or delete cells dynamically 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 boxes // Add a button to add information to a table, function addRow () {// obtain the array of input element nodes 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) {// Add an insertRow () method to specify Insert a new line var newTr = testTble. insertRow (); // Add four columns sertCell () to insert an empty <td> element var newTd0 = newTr at a specified position in a row of the HTML table. insertCell (); var newTd1 = newTr. insertCell (); var newTd2 = newTr. insertCell (); var newTd3 = newTr. insertCell (); // assign newTd0.innerText = inputNodes [0] to each column. value; newTd1.innerText = inputNodes [1]. value; newTd2.innerText = inputNodes [2]. value; newTd3.innerHTML = "<input type = 'button 'val Ue = 'delete' onclick = 'deleteable (this) '> ";} else {alert (" Please complete the information first! "); Return ;}} function deleteTable (r) {// obtain the row number var I = r. parentNode. parentNode. rowIndex; // call deleteRow () to delete this document. getElementById ('testtble '). deleteRow (I) ;}</script>The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
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
