Question

所以这是我的设置。我有一张空白的桌子和一个按钮。当我点击按钮时，我将通过ajax查询我的数据库并返回JSON。我通过JSON迭代并向表中添加行。但是，用户可以删除表格行。当他再次点击按钮时，我想确保只将删除的表附加到表格中。

这就是我现在拥有的HTML：

<table class="table table-striped table-hover" id='tableBoodschappen'>

</table>
<button type="button" class="btn btn-primary" id='opslaan' disabled>Opslaan</button>

这是我的JQuery

$(document).ready(function() {
    $("#getData").click(function() {
        $.ajax({url: "ajax/htmlBoodschappen.php", 
            dataType: 'json',
            success: function(result){  
                if(result[0].voorraadID >0) {
                    var $append='';
                    $.each(result, function(i,item) {
                        if($("tr#"+item.productID).length==0) {
                        var aantal=parseInt(item.min)-parseInt(item.aantal)
                        $append+="<tr id='"+item.productID+"' class='voorraad data'>"
                            +"<td style='vertical-align: middle;width:60px' class='aantal'>"
                                +"<span class='aantal'>"+aantal+"</span>x "
                                +"<div class='btn-group-vertical btn-group-xs btn-group-hover' role='group' style='display:none'>"
                                    +"<button type='button' class='btn btn-primary chevron-up-aantal'>"
                                        +"<span class='glyphicon glyphicon-chevron-up'></span>"
                                    +"</button>"
                                    +"<button type='button' class='btn btn-primary chevron-down-aantal'>"
                                        +"<span class='glyphicon glyphicon-chevron-down'></span>"
                                    +"</button>"
                                +"</div>"
                            +"</td>"
                            +"<td style='display:none' class='voorraadID'><input type='text'  id='"+item.voorraadID+"'></td>"
                            +"<td style='vertical-align: middle;'>"+item.artikelNaam+"</td>"
                            +"<td style='vertical-align: middle;'>"+item.artikelMerk+"</td>"
                            +"<td style='vertical-align: middle;'>"+item.inhoud+" "+item.type+"</td>"
                            +"<td style='vertical-align: middle;'><button type='button' class='close remove' aria-label='Close'><span aria-hidden='true'>&times;</span></button>"
                        +"</tr>";
                        }
                    });
                    $("#tableBoodschappen").append($append);                            $("#getData").prop("disabled", true);
                    $("#opslaan").prop("disabled", false);
                } else {
                    //alert('error');
                }
            }
        });
    });
});

所以当我按下按钮时，表格会被改变。当我按下x按钮时，tr被移除。但是，当我再次点击添加按钮时，它表示删除的行仍然存在。任何sugestions？

Answer 1

您可以创建一个放入tr's ID的数组，当用户删除时也可以从数组中删除它，再次单击该按钮时，首先检查数组中是否存在

如果不存在则通过ajax添加tr

1 个答案: