Run »
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <body> <div class="w3-col "> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-teal"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span> <h2>Modal Header</h2> </header> <div class="w3-container"> <form class="w3-container"> <p> <label>First Name</label> <input class="w3-input" type="text" id="first_name"></p> <p> <label>Last Name</label> <input class="w3-input" type="text" id="last_name"></p> <p> <label>Email</label> <input class="w3-input" type="text" id="email"></p> <P><button type="button" class="w3-btn w3-blue" id="save">Save</button> <closeform></closeform></form> </div> </div> </div> <br> <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-blue">Open Modal</button> <table class="w3-table-all" id="myTable"> <thead> <tr class="w3-blue"> <th nowrap>Sl.No</th> <th nowrap>First Name</th> <th nowrap>Last name</th> <th nowrap>Email</th> <th nowrap>Action</th> </tr> </thead> <tbody > </tbody> </table> </div> <script type="text/javascript"> $('#save').on('click', function() { var first_name=$('#first_name').val(); var last_name=$('#last_name').val(); var email=$('#email').val(); var count = $('#myTable tr').length; if(first_name!="" && last_name !="" && email!=""){ $('#myTable tbody').append('<tr class="child"><td>'+count+'</td><td>'+first_name+'</td><td>'+last_name+'</td><td>'+email+'</td><td><a href="javascript:void(0);" class="remCF1 btn btn-small btn-danger">Remove</a></td></tr>'); } }); $(document).on('click','.remCF1',function(){ $(this).parent().parent().remove(); $('#myTable tbody tr').each(function(i){ $($(this).find('td')[0]).html(i+1); }); }); </script> </body> </html>