Add and delete table information using javascript

Getting Started with JavaScript

JavaScript is a lightweight, interpreted web development language. The language system is not very complicated and is simple and easy to learn. Since all modern browsers have embedded JavaScript engines, JavaScript source code can be directly interpreted and executed in the browser, and users do not have to worry about support issues. This is a small exercise to get started with js.

Adding and deleting table information

Simple DOM operation html tag can be achieved, the code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
 </style>
 <script type="text/javascript">

  function delA(){
     //Click the hyperlink to delete that row //Use this to delete the parent element var tr = this.parentNode.parentNode;

      //Get the name of the person to be deleted var name=tr.getElementsByTagName("td")[0].innerHTML;
     //Prompt the user whether to delete var flag=confirm("Do you want to delete "+name+"?");
     
     if(flag){
      tr.parentNode.removeChild(tr);
     }

     //Prevent the browser from default behavior, such as popping up a new tab return false;
    }


  window.onload = function(){
   //Click on the hyperlink to delete an employee's information //Get the link var allA=document.getElementsByTagName("a");


   //bind response function for(var i=0;i<allA.length;i++){
    allA[i].onclick=delA;
   }


   //Add employee function, click the button to add information to the table var addEmpButton = document.getElementById("addEmpButton");
   addEmpButton.onclick=function(){
    //Get the text content in the input box var empName=document.getElementById("empName").value;
    var email = document.getElementById("email").value;
    var salary=document.getElementById("salary").value;
    

    //Create a tr
    var tr = document.createElement("tr");
    //Add content to tr tr.innerHTML="<td>"+empName+"</td>"+
        "<td>"+email+"</td>"+
        "<td>"+salary+"</td>"+
        "<td><a href='javascript:;'>Delete</a></td>";

     var a = tr.getElementsByTagName("a")[0];
     a.onclick=delA;
    //Put tr in table var employeeTable=document.getElementById("employeeTable");
    //Get tbody
    var tbody = document.getElementsByTagName("tbody")[0];

 

    tbody.appendChild(tr);
   }


  }

 </script>
</head>
<body>
 <table id="employeeTable">
  <tr>
   <th>Name</th>
   <th>Email</th>
   <th>Salary</th>
   <th>&nbsp;</th>
  </tr>
  <tr>
   <td>Tom</td>
   <td>[email protected]</td>
   <td>5000</td>
   <td><a href="">Delete</a></td>
  </tr>
  <tr>
   <td>Jerry</td>
   <td>[email protected]</td>
   <td>8000</td>
   <td><a href="">Delete</a></td>
  </tr>
  <tr>
   <td>Bob</td>
   <td>[email protected]</td>
   <td>10000</td>
   <td><a href="">Delete</a></td>
  </tr>
  <div id="formDiv">
   <h4>Add new staff</h4>
   <table>
    <tr>
     <td class="word">name: </td>
     <td class="inp">
      <input type="text" name="empName" id="empName">
     </td>
    </tr>
    <tr>
     <td class="word">email: </td>
     <td class="inp">
      <input type="text" name="email" id="email">
     </td>
    </tr>
    <tr>
     <td class="word">salary: </td>
     <td class="inp">
      <input type="text" name="salary" id="salary">
     </td>
    </tr>
    <tr>
     <td colspan="2" align="center"> <!--colspan and rowspan attributes are the number of rows and columns that a cell can span-->
      <!--align attribute is the text alignment position-->
      <button id="addEmpButton" value="abc">
       Submit
      </button>
     </td>
    </tr>
   </table>
  </div>
 </table>
</body>
</html>

The comments in the code snippets are very clear and suitable for practicing.

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:

vue.js+Element realizes the addition, deletion, modification and query in the table
JS adds, deletes and modifies HTML tables
JavaScript gets the value of the current row of the table, deletes the row, and adds the row
Vue.js implements the method of dynamically adding and deleting tables (with source code download)
AngularJS implements table addition, deletion, modification and query (front-end only)
Pure native js to add and delete tables
JavaScript to dynamically add and delete table rows (compatible with IE/FF)
Summary of js operations on table elements to add and delete table rows and columns
Use Bootstrap + Vue.js to realize dynamic display, addition and deletion of tables
JavaScript to implement dynamic addition and deletion of tables

<<: Docker Getting Started Installation Tutorial (Beginner Edition)

>>: CentOS 6.6 source code compilation and installation of MySQL 5.7.18 tutorial detailed explanation