js dynamically implements table addition and deletion operations

This article example shares the specific code for dynamically adding and deleting tables in js for your reference. The specific content is as follows

The running effect is shown in the figure (two implementation schemes, the one commented is the first implementation scheme)

Code:

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <style type="text/css">
  
  div{
   text-align:center;
   box-sizing: border-box;
   width:100%;
  }
  #div1{
   
   margin-left: 300px;
   width: 800px;
   margin-top: 50px;
  }
  #div2{
   
   margin-left: 300px;
   width: 800px;
   padding-top:50px;
  }
  #table_id{
    width: 580px;
   }
 </style>
 

 <body>
  <div id="div0">
   <div id="div1">
   <input type="text" id="userid" placeholder="Please enter your ID" />
   <input type="text" id="username" placeholder="Please enter your name" />
   <input type="text" id="gender" placeholder="Please enter your gender" />
   <input type="button" value="Add" id="add"/>
  </div>
  
  <div id="div2">
   <table border="1px" align="center" id="table_id">
    <caption style="font: '微软雅黑';font-size:20px;">Student Information Form</caption>
    <tr>
     <th>Number</th>
     <th>Name</th>
     <th>Gender</th>
     <th>Operation</th>
    </tr>
    <tr>
     <td>1</td>
     <td>Linghu Chong</td>
     <td>Zhang Wuji</td>
     <td><input type="button" value="Delete" style="color: blue;" onclick="delTr(this)"/></td>
    </tr>
    <tr>
     <td>1</td>
     <td>Linghu Chong</td>
     <td>Zhang Wuji</td>
     <td><input type="button" value="Delete" style="color: blue;" onclick="delTr(this)" /></td>
    </tr>
    <tr>
     <td>1</td>
     <td>Linghu Chong</td>
     <td>Zhang Wuji</td>
     <td><input type="button" value="Delete" style="color: blue;" onclick="delTr(this)"/></td>
    </tr>
   </table>
  </div>
  </div>
 </body>
 <script type="text/javascript">
  // When the add button is clicked, the following method is triggered document.getElementById("add").onclick=function(){
   // Get the content of each text box var id = document.getElementById("userid").value;
   var name = document.getElementById("username").value;
   var gender = document.getElementById("gender").value;
   
  /* // add id
   var td_id = document.createElement("td");
   var text_id = document.createTextNode(id);
   td_id.appendChild(text_id);
  
   
   // Add username
   var td_username = document.createElement("td");
   var text_username = document.createTextNode(name);
   td_username.appendChild(text_username);
     
   // Add gender
   var td_gender = document.createElement("td");
   var text_gender = document.createTextNode(gender);
   td_gender.appendChild(text_gender);
   
   // Add button var td_button = document.createElement("td");
   var ele_input = document.createElement("input");
   ele_input.setAttribute("type","button");
   ele_input.setAttribute("value","delete");
   ele_input.setAttribute("onclick","delTr(this)");
   ele_input.style.color="blue"; 
   td_button.appendChild(ele_input);
   
   var ele_tr = document.createElement("tr");
      ele_tr.appendChild(td_id);
   ele_tr.appendChild(td_username);
   ele_tr.appendChild(td_gender);
   ele_tr.appendChild(td_button);
   var ele_table = document.getElementsByTagName("table")[0];
   
   ele_table.appendChild(ele_tr);*/
   
   
   // Use innerHtml method to dynamically add a table var tab = document.getElementsByTagName("table")[0];
   tab.innerHTML+="<tr>\n"+
    "<td>"+id+"</td>\n"+
    "<td>"+name+"</td>"+
    "<td>"+gender+"</td>"+
    "<td><input type='button' value='Delete' onclick='delTr(this)' style='color:blue'/></td>"+
    "</tr>"
  }
  
  
       
   function delTr(obj){
    
    var table = obj.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode;
    table.removeChild(tr);   
   }
 </script>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS/jQuery implements a very simple table table to add and delete rows function example
js dynamically adds table row by row to add, delete, traverse the value of the example code
js to add and delete tables (two methods)
JS implements the addition, modification and deletion of dynamic tables (recommended)
Dynamically add and delete table rows based on JavaScript
Methods for dynamically adding and deleting table rows using native JS and JQuery
js simple table add row and delete row operation example
js implementation code for dynamically adding and deleting table rows
JS small function (operating Table--dynamically adding and deleting tables and data) implementation code
JavaScript dynamic operation table example (add, delete rows, columns and cells)

<<: Analysis of the implementation of MySQL statement locking

>>: Explanation of the process of docker packaging node project