• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 298
  • Last Modified:

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

0
HumanScaleDev
Asked:
HumanScaleDev
  • 3
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
Can you create a jsfiddle.net ? It is hard to test when you do not post rendered HTML
0
 
Gurpreet Singh RandhawaWeb DeveloperCommented:
you can use datatables for your CRUD operations
0
 
HumanScaleDevAuthor Commented:
@ 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!
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Gurpreet Singh RandhawaWeb DeveloperCommented:
hi, Here is the following link where you can do what you need:

http://datatables.net/blog/2012-05-31

You try to do it and create a jsfiddle, we will help in making it work of what you need.
0
 
HumanScaleDevAuthor Commented:
Thank you! currently working on another project, will get back to this at the end of this week/beginning of next one.

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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now