Question

编辑：

确定到目前为止我已经实现了删除行的目标之一...但是现在我无法在删除当前行之后重新创建上一行中的删除按钮。代码看起来像这样

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>

和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++;
        }
    });
});

它看起来像JQuery的这一行

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

没有做它应该做的工作..语法对我来说很好，但我可能是错的。那么也许任何人都可以查看问题所在并帮助我解决问题？提前谢谢

Answer 1

这是你想要的吗？的 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(); });

并将del按钮类重命名为survey_del。

Answer 2

我认为你想要的是：

   $(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++;
            }
        });
    });

小提琴：http://jsfiddle.net/z38t3n65/

Answer 3

要避免多次parent()来电，您甚至可以使用parents()。

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

我做了一个测试的jsfiddle。

http://jsfiddle.net/u8gfrazu/

使用jquery动态添加和删除表中的行

3 个答案: