HumanScaleDev
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!
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> ;<cfinput name="category1" type="text" style="width:35px" maxlength="3" /><
<br />
<cfinput type="button" name="tier" id="tier" value="Add Tier" class="btn" style="font-size:8px"/>
</td>
<td> <cfinput name="qty1" type="text" style="width:35px" maxlength="3" /><br />
</td>
<td> <cfinput type="text" name="listP1" style="width:60px" maxlength="10"><br />
</td>
<td> <cfinput type="text" name="endUser1" style="width:60px" maxlength="5"><br />
</td>
<td> <cfinput type="text" name="instPerItem1" style="width:60px" maxlength="5"><br />
</td>
<td> <cfinput type="text" name="extListP1" style="width:60px" maxlength="5"><br />
</td>
<td> <cfinput type="text" name="custTotal1" style="width:60px" maxlength="10"><br />
</td>
</tr>
<tr class="clonedInputT" id="inputT1" >
<td>
TEST TIER
</td>
</tr>
</table>
</td>
</tr>
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
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!
I appreciate it!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you! currently working on another project, will get back to this at the end of this week/beginning of next one.
Thanks!
Thanks!
ASKER
Thank you! We ended up using another approach but the link is very helpful for future projects. Thanks!