js dynamically implements table addition and deletion operations

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

Recommend

Docker data storage tmpfs mounts detailed explanation

Before reading this article, I hope you have a ba...

Detailed explanation of how Nginx solves the problem of cross-domain access to front-end resources

After being tortured by the front-end cross-domai...

...

Detailed analysis of the blocking problem of js and css

Table of contents DOMContentLoaded and load What ...

CSS3 achieves cool sliced ​​image carousel effect

Today we will learn how to use CSS to create a co...

Nginx load balancing configuration, automatic switching mode when downtime occurs

Strictly speaking, nginx does not have a health c...

Several ways to store images in MySQL database

Usually the pictures uploaded by users need to be...

Analyze the duration of TIME_WAIT from the Linux source code

Table of contents 1. Introduction 2. First, let&#...

Vue project packaging, merging and compression to optimize web page response speed

Table of contents Preface 1. The request content ...

Detailed explanation of the implementation process of dual-master synchronization of partial tables in MySQL 5.7

Preface Recently, I encountered a requirement. Du...

Elements of user experience or elements of web design

System and user environment design <br />Th...

VMware Workstation installation and installation of WIN10 operating system to connect to the external network step by step guide (super detailed tutorial)

First download VMware Workstation 15.1 version. I...

MySQL 8.0.18 stable version released! Hash Join is here as expected

MySQL 8.0.18 stable version (GA) was officially r...

Implementation of MySQL master-slave status check

1. Check the synchronization status of A and B da...

Example explanation of MySQL foreign key constraints

MySQL's foreign key constraint is used to est...