By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,984 Members | 1,011 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,984 IT Pros & Developers. It's quick & easy.

How to add rows in a table by clicking on checkbox

P: 1
Suppose there is a table with three columns
Parent Name Address.
Parent is Checkbox column...each rows will be having checkbox.
The below code will create a pattern ...

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Add / Remove Table Rows</title> <style type="text/css">
  2.     table{
  3.         width: 100%;
  4.         margin: 20px 0;
  5.         border-collapse: collapse;
  6.     }
  7.     table, th, td{
  8.         border: 1px solid #cdcdcd;
  9.     }
  10.     table th, table td{
  11.         padding: 5px;
  12.         text-align: left;
  13.     }
  14. </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript">
  15.     $(document).ready(function(){
  16.         $(".add-row").click(function(){
  17.             var name = $("#name").val();
  18.             var email = $("#email").val();
  19.             var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
  20.             $("table tbody").append(markup);
  21.         });
  22.  
  23.         // Find and remove selected table rows
  24.         $(".delete-row").click(function(){
  25.             $("table tbody").find('input[name="record"]').each(function(){
  26.                 if($(this).is(":checked")){
  27.                     $(this).parents("tr").remove();
  28.                 }
  29.             });
  30.         });
  31.     });    
  32. </script> </head> <body> <form> <input type="text" id="name" placeholder="Name"> <input type="text" id="email" placeholder="Email Address"> <input type="button" class="add-row" value="+"> <input type="button" class="delete-row" value="-"> </form> <table> <thead> <tr> <th>Parent</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="record" class="add-row" value="+"></td> <td>Peter Parker</td> <td>peterparker@mail.com</td> </tr> </tbody> </table> </body> </html>

My requirement is , In second row id I click on checkbox of the second row, 3rd row should come but here its working only for 1st row checkbox...

Thanks in advance...
Jan 21 '19 #1
Share this Question
Share on Google+
1 Reply


gits
Expert Mod 5K+
P: 5,270
well - for me it seems that you just add events to the existing row onload of the page. thus its working for this row but not for newly created elements. so you need to apply the eventhandlers to those as well.
Jan 21 '19 #2

Post your reply

Sign in to post your reply or Sign up for a free account.