使用jquery动态添加和删除表中的行(再一次......)

时间:2014-12-09 22:51:10

标签: jquery html5

编辑:好的,我几乎已经解决了我的问题,现在JQuery看起来像这样:

<script>
    $(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'></td>" +
            "</tr>");

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

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

HTML部分:

<body>
<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>
</body>

现在,当我第一次按下删除按钮时,它会像它应该的那样行动并从表中删除整行并重新创建上一行中的删除按钮,但问题是这个重新创建的按钮不起作用...如果我再次添加一行,它会创建一个新的删除按钮,并删除之前重新创建的,新的再次运行,所以我在一个循环中。有人可以帮我这个吗?我的代码出了什么问题?

0 个答案:

没有答案