Question

我有一个包含数据行的表，当用户点击行（tr）或复选框时，它会将该行数据附加到另一个位置。如何在用户从原始表和新附加行中取消选中时，该行消失？

我想要它，以便当用户从原始表中取消选中时，附加的行将消失。当用户从附加行中取消选中时，只有附加的行会消失。

// original table
<div id="searchsub">
 <table class="showsub">
    <tr class="datarow">
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
 </table>
</div>

Row附加到这个新表：

<table id="datarow">
</table>

这是我的jquery：

$(document).ready(function() {
        $("#searchsub table tr").click(function(event) {
            if(event.target.type !== 'checkbox') {
                $(":checkbox", this).trigger("click");
            }
        });

        $i = 1;
        $("input[type='checkbox']").change(function(e) {
            if($(this).is(":checked")) {
                $(this).closest("tr").addClass("highlightrow");
                var datarow = $(this).closest("tr.datarow");
                var row = datarow.clone();
                row.addClass("append" + $i);
                $("#submitshipment #datarow").append(row);
                $i++;
            } else {
                $(this).closest("tr").removeClass("highlightrow");
                $(".append").closest("tr").remove();
            }
        })
    })

当然，这样一旦取消选中该行，所有行都将被删除，这不是我想要的。请帮帮忙？

编辑：标记附加行：

<tr class="datarow highlightrow append1">
    <td>120093</td>
    <td>G13</td>
    <td><input type="checkbox" class="searchsub" name="searchsub[]" value="1"></td>
 </tr>

的jsfiddle：

http://jsfiddle.net/7cXqR/1/

Answer 1

是的，不幸的是，非功能性的jsFiddle并没有真正帮助; - ）

我想我已经整理出了你想要做的事情;问题是你没有任何东西（使用jQ .data（）或标记）将你的追加行与源行相关联。如果你看看我制作的jsFiddle（从你的分叉），你会看到我如何使用＆＃34;值＆＃34;您在源表中的复选框上具有的属性，以在附加表中查找克隆的行：

$('#datarow').find('input:checkbox[value="' + $(this).val() + '"]').closest('tr').remove();

http://jsfiddle.net/A4w59/

可以修改此方法以使用任何标记（库存或自定义数据 - *属性）甚至jQ的.data（）方法;关键是能够关联源和＆amp;追加行，以便在源表中取消选择时可以删除附加的行。

jquery，取消选中时删除表行

1 个答案: