Add,Remove Dynamic rows with Jquery

Question

I have done with adding and removing dynamic rows in html, jquery.

HTML:

<form action="grading.php" method="post">               
<table width="100%" id="tableRealizzazione">
    <tr>
        <th></th>
        <th style="padding:12px;text-align:center;">Serial No</th>
        <th style="padding:12px;text-align:center;">Personale</th>
        <th style="padding:12px;text-align:center;">Percentage</th>
        <th style="padding:12px;text-align:center;">Marketing point</th>
        <th style="padding:12px;text-align:center;">Add/Remove</th>
    </tr>

    <tr class="even">
        <td></td>
        <td>
            <input type="text" name="serial[]"  class="add increment" value="1">
        </td>
        <td style="padding:12px;">
            <input type="text" value="" name="Personale[]">
        </td>
        <td style="padding:12px;">
            <input type="text" name="from[]" size="5%"> -
            <input type="text" name="to[]" size="5%"> %
        </td>
        <td style="padding:12px;">
            <input type="text" class="totaliCostiGestione" name="marketpt[]">
        </td>
        <td style="padding:12px;">
            <input type="text" name="programid[]" class="add" value="34" size="10%">
        </td>
        <td style="padding:12px;">
            <input type="button" class="addnew add" value="+" />
        </td> 
    </tr>
    <tr>
        <td>
            <input type="submit" name="submit" value="submit">
        </td>
    </tr>                     
</table>

jQuery:

    $('.addnew').live('click', function(){
var thisRow = $(this).parent().parent();
newRow = thisRow.clone(true).insertAfter(thisRow);
newRow.find('input:not(.add)').val("");

$(this).removeClass('addnew').addClass('remove');
    $(this).val("-");
    newRow.find('input.increment').val(parseInt(thisRow.find('input.increment').val())+1);
});

$('.remove').live('click', function(){
    $(this).parent().parent().remove();
});

But I want add/remove actions to the same button. Instead of appearing remove icon to the previous row.

Can anyone suggest?

Can you give more explanation please? Not too clear what you want. — Greeso
– Greeso, Commented Nov 9, 2012 at 13:55
I want to add,remove dynamic rows and this was working code, right now my jquery works like add/remove rows for separate icons, but I want add/remove actions to the same button jsfiddle.net/DjddU — Theranil
– Theranil, Commented Nov 9, 2012 at 13:58
What buttons are you talking about? The buttons on the side of your "rows" in the link you provided are add/remove buttons. If you click on a "+" button, it will add a row, and this "+" button will change to a "-" button, allowing you to remove a row. Is this what you are talking about? — Greeso
– Greeso, Commented Nov 9, 2012 at 14:02
Yes, but + icon and - icon. When I click first time '+'icon should work and add a new row. And when I click '-' icon i want in the same row only but not to the previous row — Theranil
– Theranil, Commented Nov 9, 2012 at 14:04

gotohales · Accepted Answer · 2012-11-09 16:28:27Z

1

I believe this is what you are looking for, but let me know if it isn't.

    $('.addnew').live('click', function(){
    var thisRow = $(this).parent().parent();
    newRow = thisRow.clone(true).insertAfter(thisRow);
    newRow.find('input:not(.add)').val("");

    newRow.find('.addnew').removeClass('addnew').addClass('remove');
    newRow.find('.remove').val("-");
    newRow.find('input.increment').val(parseInt(thisRow.find('input.increment').val())+1);
});

$('.remove').live('click', function(){
    $(this).parent().parent().remove();
});

This keeps the + on the first row and adds - buttons to the cloned rows.

http://jsfiddle.net/p5QwC/3/ for a working example.

UPDATE

Assuming you don't want the initial row to be removable, maybe this is more what you are looking for. http://jsfiddle.net/p5QwC/10/

edited Nov 9, 2012 at 16:28

answered Nov 9, 2012 at 14:32

gotohales

3,7151 gold badge23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Theranil Over a year ago

That was the earlier code workign same, but need + and - actions to the same row not the - to the previous row

gotohales Over a year ago

So once a row is added, you want a + button and a - button on every row?

Theranil Over a year ago

Like this example - concrete5.org/documentation/how-tos/designers/…

gotohales Over a year ago

Added a new jsfiddle link in the update. See if that is what you need.

Theranil Over a year ago

" + and - should be same for each row, but right now it was - in the previous row. The same logic i got. i think you may get idea by looking at this concrete5.org/documentation/how-tos/designers/…

|

Collectives™ on Stack Overflow

Add,Remove Dynamic rows with Jquery

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related