使用jQuery从表中动态添加和删除行 [英] dynamicaly add and remove rows from table with jquery

问题描述

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

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>

和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的这一行

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

推荐答案

这是您想要的吗? FIDDLE

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

然后将del按钮类重命名为survey_del.

And rename the del button class to survey_del.

这篇关于使用jQuery从表中动态添加和删除行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！