javascript - jquery，未选中时删除表行

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>

行追加到这个新表:

<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(从您的 fork 而来)，您将看到我如何使用源表中的复选框上的“value”属性来查找附加表中的克隆行:

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

http://jsfiddle.net/A4w59/

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