Question

我正在尝试动态地向我的表添加和删除行（通过Id）。添加按钮工作正常，但我不知道为什么删除按钮不起作用（它删除最后一行或不起作用）。有什么建议吗？

这是我的表：

<table class="customFiltersTable" id="customFiltersTable">
    <tbody>
    </tbody>
</table>

Javascript add按钮里面有以下代码：

filtersRow = filtersRow + 1;

var fType1 = $('<tr class="rowTableFilters" id="rowFilters'+filtersRow+'" name="rowFilters'+filtersRow+'"><td class="colFilters" id="colFilters'+column1+'" name="colFilters'+column1+'" width="480px" align="center"></td><td class="colFilters" id="colFilters'+column2+'" name="colFilters'+column2+'" width="480px" align="center"></td><td class="delButton" id="delButton" name="delButton" width="40px" align="center"><button type="button" class="btn btn-link" id="deleteFilter'+filtersRow+'" name="deleteFilter'+filtersRow+'" style="float: right;">Del</button></td></tr>');

$("#customFiltersTable").append(fType1).promise().done(function () {
   $("#deleteFilter" + filtersRow).click(function(){
         var row = document.getElementById("rowFilters"+filtersRow);
         row.parentNode.removeChild(row);
   });
});

谢谢！

Answer 1

熟悉jQuery的事件委托，https://learn.jquery.com/events/event-delegation/。您将了解到可以避免将删除单击侦听器附加到您添加的每一行，而是将该侦听器附加到表元素一次：

$('#customFiltersTable').on('click', 'button', function () {
    $(this).closest('tr').remove(); 
});

Answer 2

您正在递增filtersRow;但是，只有在按下按钮时才会评估您的点击功能。换句话说，这段代码：

function(){
     var row = document.getElementById("rowFilters"+filtersRow);
     row.parentNode.removeChild(row);
}

在点击时执行，并且将以您上次递增的filtersRow值运行。你将永远删除最后一行。

也许是这样的：

function () { $(this).closest('tr').remove(); }

对不起，这是我脑子里编的。

Answer 3

添加行：

var tmp = '<tr id="4_r"><td>row4</td></tr>';
$('#myTable tbody').append(tmp);

删除行有id =“4_r”：

var iddel = "4_r";

$('#myTable').closest('table').find('tbody > tr')
                .each(function(){
                    var idr = this.id;
                    if(idr == iddel){
                        $(this).remove();
                    }
                });

Javascript / JQuery按Id添加和删除表行

3 个答案: