CODEWITHSUNDEEP
jquery
djdanas
djdanas

Reputation: 17

dynamicaly add and remove rows from table with jquery

EDIT:

ok so far i've made one of my goals to remove row... but now i can't make to recreate deletion button in previous row after current row is deleted.. code looks like this

HTML:

<div id="container">
    <img id="header" src="images/header.png">
    <div id="content">
        <form id="survey_form" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>">
            <table id='survey_table' class="cols3">
                <tr>
                    <td class="row-1">1</td>
                    <td class="row-2"><input type="text" class="survey_textbox" required id="Klausimas1"/></td>
                    <td class="row-3"></td>
                </tr>
            </table>
            <input type="button" id="add_q" class="survey_button" value="Pridėti klausimą"/>
            <input type="submit" class="survey_button" value="Patvirtinti" style="float: right" onclick=""/>
        </form>
    </div>
</div>

and JQuery:

$(document).ready(function(){
    var x = 2;
    $("#add_q").click(function(){
        if (x <= 10){
            $("#survey_table").append("<tr id='tr"+x+"'>" +
                                        "<td class='row-1'>"+x+"</td>" +
                                        "<td class='row-2'><input type='text' class='survey_textbox' required id='Klausimas"+x+"'/></td>" +
                                        "<td id='td"+x+"' class='row-3'><input type='button' class='survey_button' value='-' id='del"+x+"'/></td>" +
                                      "</tr>");

            $("#del"+x).click(function(){
                $(this).parent().parent().remove();
                x--;
                $("#td"+x).append("<input type='button' class='survey_button' value='-' id='del"+x+"'/>");
            });
            $("#del"+(x-1)).remove();
            x++;
        }
    });
});

it looks like this line from JQuery

$("#td"+x).append("<input type='button' class='survey_button' value='-' id='del"+x+"'/>");

doesn't do the job it is supposed to do.. syntax looks good for me but i could be wrong. So maybe anyone could check where is the problem and help me out with solution? thanks in advance

Upvotes: 0

Views: 130

Answers (3)

vaso123
vaso123

Reputation: 12391

Is this what you want? FIDDLE

     $('#container').on('click', '.survey_del', function() {
        var row = $(this).closest('tr');
        if (x >= 2) {
            x--;
        }
        var previous = $(row).prev('tr');
        $(previous).find('td.row-3').html("<input type='button' class='survey_del' style='float: right' value='-' id='del" + x + "'>");
        $(row).remove();
    });

And rename the del button class to survey_del.

Upvotes: 1

stengelp
stengelp

Reputation: 63

To avoid multiple parent() calls you even could use parents().

$("#del" + x ).click(function() {
     $(this).parents("tr").remove()
});

I made a jsfiddle with a test.

http://jsfiddle.net/u8gfrazu/

Upvotes: 0

M. Page
M. Page

Reputation: 2814

I think that what you want is:

   $(document).ready(function(){
        var x = 1;
        $("#add_q").click(function(){
            if (x <= 10){
                $("#survey_table").append("<tr id='tr"+x+"'>" +
                "                              <td class='row-1'>"+x+"</td>" +
                "<td class='row-2'><input type='text' class='survey_textbox' required id='Klausimas"+x+"'></td>" +
                "<td class='row-3'><input type='button' class='survey_button' style='float: right' value='-' id='del"+x+"'></td>" +
                "</tr>");
                $("#del"+x).on('click', function(){console.log($(this)); $(this).parent().parent().remove()});
                x++;
            }
        });
    });

Fiddle: http://jsfiddle.net/z38t3n65/

Upvotes: 0

Related Questions