Create Add or Delete Button On Table

Hi Friends,

How are you all hope you all are fine today we will discuss & guide how to create add or delete button in HTML Table you need just basic under standing over JavaScript & HTML5 under is the code & screen shots…

This is the code.

<!DOCTYPE html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <title>Delete Row</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <style>  
     table, th, td {  
   border: 3px solid black;  
 }  
   </style>  
 </head>  
 <body>  
   <h2 onmouseover="this.style.color='green';" onmouseout="this.style.color='red';" >Click the button to add and delete rows</h2>  
 <table id="myTable">  
   <th>Index</th>  
   <th>Name</th>  
   <th>Class</th>  
   <th>Delete Row</th>  
   <th>Create Row</th>  
  <tr>  
   <td>0</td>  
   <td>Ali</td>  
   <td>10</td>  
   <th><button onclick="myCreateFunction()">Create row</button></th>  
   <th><button onclick="myDeleteFunction()">Delete row</button></th>  
  </tr>  
  <tr>  
   <td>1</td>  
   <td>Sohail</td>  
   <td>9</td>  
   <th><button onclick="myCreateFunction()">Create row</button></th>  
   <th><button onclick="Deleterow()">Delete row</button></th>  
  </tr>  
  <tr>  
   <td>2</td>  
   <td>Waseem</td>  
   <td>10</td>  
   <th><button onclick="myCreateFunction()">Create row</button></th>  
   <th><button onclick="Deleterow()">Delete row</button></th>  
  </tr>  
 </table>  
 <br>  
 </body>  
   
   function myCreateFunction() {  
   var table = document.getElementById("myTable");  
   var row = table.insertRow(0);  
   var cell1 = row.insertCell(0);  
   var cell2 = row.insertCell(1);  
   var cell3 = row.insertCell(2);  
   var cell4 = row.insertCell(3);  
   var cell5 = row.insertCell(4);  
   cell1.innerHTML = "NEW CELL1";  
   cell2.innerHTML = "NEW CELL2";  
   cell3.innerHTML = "NEW CELL3";  
   cell4.innerHTML = "NEW CELL4";  
   cell5.innerHTML = "NEW CELL5";  
 }  
 function myDeleteFunction() {  
   document.getElementById("myTable").deleteRow(0);  
 }  
   
 </html>

This is the screen shot…