Question

当从第一个表中取消选中复选框时，我无法删除特定行。似乎index属性在 else部分中不起作用我正在从第一个表到第二个表克隆行。

第一张表的

html：

<table id="vergeTable" class="pure-table dataTable table-bordered vergeTable rowClick" role="grid">
   <thead>
      <tr role="row">
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Navn</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Mandat</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Status</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Regnskapsplikt</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Dato startet</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Dato til</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Velg</th>
      </tr>
   </thead>
   <tbody>
      <tr class="odd" role="row">
         <td>Alfred Psa Asker</td>
         <td>Ivareta personens interesser innenfor det personlige og økonomiske området</td>
         <td> Tidligere </td>
         <td>Ordinær</td>
         <td>10.07.2013</td>
         <td>01.10.2016</td>
         <td class="contentCenter">
            <input id="regnskapVerge0" class="transForm1Dot5 valgtVerge" name="regnskap.regnskapVerge[0].velgVerge" value="true" checked="checked" type="checkbox">
            <input name="_regnskap.regnskapVerge[0].velgVerge" value="on" type="hidden">
         </td>
      </tr>
      <tr class="odd vergeDetailRow" role="row">
   </tbody>
</table>

html for second table：

<table id="vergeTable2" class="pure-table dataTable table-bordered vergeTable rowClick" role="grid">
   <thead>
   <tbody>
      <tr class="message2" style="display: none;">
      <tr class="odd vergeDetailRow" role="row">
         <td>Alfred Psa Asker</td>
         <td>Ivareta personens interesser innenfor det personlige og økonomiske området</td>
         <td> Tidligere </td>
         <td>Ordinær</td>
         <td>10.07.2013</td>
         <td>01.10.2016</td>
      </tr>
      <tr class="odd vergeDetailRow" role="row">
   </tbody>
</table>

这里是js代码：

popuateFinalVergeTable: function(e) {
    $("#vergeTable input:checkbox.valgtVerge").change(function() {
        if (this.checked) {
            $(".message2").hide();
            //Cache cloned object in a variable
            var clone = $(this).closest("tr").clone();
            //Remove checkbox
            clone.find('td').eq(6).remove();
            //Append it
            clone.appendTo("#vergeTable2");
        } else {
            var index = $(this).closest("tr").attr("data-index");
            var findRow = $("#vergeTable2 tr[data-index='" + index + "']");
            findRow.remove();
            var checks = $('#vergeTable').find(':checked').length;
            if (!checks) {
                $(".message2").show();
            }
        }
    }).change();
 },

Answer 1

我不知道你应该在更改事件监听器之后调用.change()。

至于缺少的data-index，.data()设置纯粹由jQuery处理的后台数据 - 它不会设置HTML属性，因此您无法通过$('tr').attr('data-index')访问它只有$('tr').data('index')。

查看此代码并根据您的需要进行编辑

$("#table1 input:checkbox").change(function () {
    if ($(this).prop('checked')) {
        var clone = $(this).closest("tr").clone();
        clone.find('td').eq(1).remove();
        clone.appendTo("#table2");
    } else {
        var index = $(this).closest("tr").attr("data-pk");
        $("#table2 tr[data-pk='" + index + "']").remove();
    }
});

看看这个小提琴https://jsfiddle.net/sj08fk7z/

取消选中复选框时，无法从第二个表中删除行

1 个答案: