By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,491 Members | 3,132 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,491 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+
2 Replies


gits
Expert Mod 5K+
P: 5,333
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

P: 18
try this script
Expand|Select|Wrap|Line Numbers
  1. $('input[type="checkbox"]').change(function() {
  2.     var val = $(this).val();
  3.     if($(this).is(':checked')) {
  4.         var $tr = $('<tr />').attr('data-val', val);
  5.         var $td = $('<td><i class="fa fa-times" aria-hidden="true"></i></td>');
  6.  
  7.         $tr.append($td);
  8.         $('#tbl').append($tr);
  9.     }
  10.     else {
  11.         $('#tbl').find("[data-val='"+ val +"']").remove();
  12.     }
  13.  
  14.  });
Jul 26 '19 #3

Post your reply

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