Link to home
Start Free TrialLog in
Avatar of HumanScaleDev
HumanScaleDevFlag for United States of America

asked on

Dynamically add and delete tables and dynamically adding and deleting rows in those tables created using JQuery

Hello,

The project I'm working on was originally designed to dynamically add rows with JQuery. The problem is, the user wants to add subcategories to each row.  I decided to use tables instead of the rows for the category and then tried to dynamically add rows to those tables created but I'm stuck. The default table works fine. I can add other tables as well but when adding a new table, it's copying over the new subcategories(rows) previously created and it's unable to add new rows on the new and previous table (the ID of the button changes, not sure how to make the code work for the new ID created).


p.s: I have the feeling this code is not going to work since I'm using clone. Any other suggestions are appreciated.

Thanks!

$('#btnAddD').click(function() {                 
  var numD     = $('.clonedInputD').length; 
 var newNumD  = new Number(numD + 1);      
 var newElemD = $('#inputD' + numD).clone().attr('id', 'inputD' + newNumD);                  

newElemD.find(':input').each(function() {							 
      var name = $(this).attr('name').replace(/\d+$/, '');
      $(this).attr({id: name + newNumD, name: name + newNumD});
	 
	  if (($(this).attr('name')).indexOf("prodCat") != -1){ 
	  $(this).val('');	
	  }
	  if (($(this).attr('name')).indexOf("tier") != -1){ 
	  $(this).val('Add Tier');	
	  }
	  else{
	  $(this).val('');	  
	  }
	 
});                  

$('#inputD' + numD).after(newElemD);                   
$('#btnDelD').attr('disabled','');                  
$('#nCountD').val(newNumD);
$('#qweqweqw').text(newNumD);						
 if (newNumD == 5)                     

$('#btnAddD').attr('disabled','disabled');            
 }); 
  
   $('#btnDelD').click(function() {                 
							   
	var numD = $('.clonedInputD').length; 

$('#inputD' + numD).remove();     // remove the last element                   
   $('#nCountD').val(numD - 1);			
$('#btnAddD').attr('disabled','');                  
if (numD-1 == 1)                     
$('#btnDelD').attr('disabled','disabled');             
 });               
   $('#btnDelD').attr('disabled','disabled');     
   
// Using it for the tiers

$('#tier').click(function() {                 
  var numT     = $('.clonedInputT').length; 
										
 var newnumT  = new Number(numT + 1);      
											
  var newElemT = $('#inputT' + numT).clone().attr('id', 'inputT' + newnumT);                  
																																	 $('#inputT' + numT).after(newElemT);                   
										
$('#btnDelD').attr('disabled','');                  
									
$('#nCountD').val(newnumT);

   $('#qweqweqw').text(newnumT);																			
 if (newnumT == 5)                     
										
$('#btnAddD').attr('disabled','disabled');            

 }); 
  
   
  
<table class="clonedInputD" id="inputD1" >
    <tr>
    <td>&nbsp;;<cfinput name="category1" type="text" style="width:35px" maxlength="3" /><
      <br />
    &nbsp;&nbsp;<cfinput type="button" name="tier" id="tier" value="Add Tier" class="btn" style="font-size:8px"/>  
      </td>
    <td>&nbsp;<cfinput name="qty1" type="text" style="width:35px" maxlength="3" /><br />
    &nbsp;
    </td>
    <td>&nbsp;<cfinput type="text" name="listP1" style="width:60px" maxlength="10"><br />
    &nbsp;</td>
    <td>&nbsp;<cfinput type="text" name="endUser1" style="width:60px" maxlength="5"><br />
    &nbsp;</td>
    <td>&nbsp;<cfinput type="text" name="instPerItem1" style="width:60px" maxlength="5"><br />
    &nbsp;</td>
    <td>&nbsp;<cfinput type="text" name="extListP1" style="width:60px" maxlength="5"><br />
    &nbsp;</td>
    <td>&nbsp;<cfinput type="text" name="custTotal1" style="width:60px" maxlength="10"><br />
    &nbsp;
    </td>
  </tr>
  <tr class="clonedInputT" id="inputT1" >
    <td>&nbsp;
    TEST TIER
    </td>
  </tr>
  </table>
  </td>
  </tr>

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Can you create a jsfiddle.net ? It is hard to test when you do not post rendered HTML
you can use datatables for your CRUD operations
Avatar of HumanScaleDev

ASKER

@ myselfrandhawa. I've never used them and I can't find any good examples for what I'm looking for. Is there anything out there that you could point me to?
I appreciate it!
ASKER CERTIFIED SOLUTION
Avatar of Coast Line
Coast Line
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you! currently working on another project, will get back to this at the end of this week/beginning of next one.

Thanks!
Thank you! We ended up using another approach but the link is very helpful for future projects. Thanks!