javascript Realizes Adding and Deleting Table Information

2021-11-01 23:28:49
OfStack

Getting Started with JavaScript

JavaScript is a lightweight, interpretive Web development language, the language system is not very complex, easy to learn. Since all modern browsers have been embedded in the JavaScript engine, JavaScript source code can be directly interpreted and executed in the browser, users do not have to worry about support issues, this is a small exercise to get started with js

Addition and deletion of table information

Simple DOM operation html tag can be realized, and 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 the 1 Row 
     // Use this Delete the parent element 
     var tr = this.parentNode.parentNode;

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

     // Prevent browser default behaviors, such as popping up new tabs 
     return false;
    }


  window.onload=function(){
   // Click the hyperlink to delete 1 Employee information 
   // Get a link 
   var allA=document.getElementsByTagName("a");


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


   // Add Employee Feature , 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 1 A tr
    var tr=document.createElement("tr");
    // Toward tr Add content to 
    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 Put on table Medium 
    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>tom@tom.com</td>
   <td>5000</td>
   <td><a href="">Delete</a></td>
  </tr>
  <tr>
   <td>Jerry</td>
   <td>jerry@sohu.com</td>
   <td>8000</td>
   <td><a href="">Delete</a></td>
  </tr>
  <tr>
   <td>Bob</td>
   <td>bob@tom.com</td>
   <td>10000</td>
   <td><a href="">Delete</a></td>
  </tr>
  <div id="formDiv">
   <h4> Add a new employee </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 Property is the number of rows and columns a cell can span -->
      <!--align Property is the text alignment position -->
      <button id="addEmpButton" value="abc">
       Submit
      </button>
     </td>
    </tr>
   </table>
  </div>
 </table>
</body>
</html>

The comments in the code fragment are very clear, which is suitable for practicing hands.