Run
<!doctype html> <html lang="en"> <head> <title>jQuery Add Table Rows Dynamically</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> table.myTable{ width: 100%; border-collapse: collapse; margin-top:20px; } table.myTable th, table.myTable td{ border: 1px solid #cdcdcd; padding: 7px; } </style> <script> $(document).ready(function(){ $('.btn-addrow').click(function(){ var txtTeam = $('.txtTeam').val(); var txtCricketer = $('.txtCricketer').val(); var txtScore = $('.txtScore').val(); $('.myTable tbody').append("<tr><td>"+txtTeam+"</td><td>"+txtCricketer+"</td><td>"+txtScore+"</td></tr>"); }); }); </script> </head> <body> <h2>jQuery Add Table Rows Dynamically</h2> <p>Please fill the below form and click the 'Add New Row' button to add table rows dynamically.</p> <form> <input type="text" class="txtTeam" placeholder="Enter Team Name"> <input type="text" class="txtCricketer" placeholder="Enter Cricketer Name"> <input type="text" class="txtScore" placeholder="Enter Score"> <button type="button" class="btn-addrow">Add New Row</button> </form> <table class="myTable"> <thead> <tr> <th>Team Name</th> <th>Cricketer Name</th> <th>Score</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>
Go to
Tutorialdeep Homepage