我有一个包含数据行的表,当用户单击行 (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:
最佳答案
是的,不幸的是,非功能性的 jsFiddle 并没有真正的帮助;-)
我想我已经弄清楚了你想要做的事情;问题是您没有任何内容(无论是使用 jQ .data() 还是在标记中)将附加行与源行相关联。如果您查看我制作的 jsFiddle(从您的 fork 而来),您将看到我如何使用源表中的复选框上的“value”属性来查找附加表中的克隆行:
$('#datarow').find('input:checkbox[value="' + $(this).val() + '"]').closest('tr').remove();
可以修改此方法以使用任何标记(库存或自定义 data-* 属性)甚至 jQ 的 .data() 方法;关键是能够关联源行和附加行,以便您可以在源表中取消选择附加行时删除附加行。
关于javascript - jquery,未选中时删除表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24022543/