Question

我知道这个问了很多次。我已经读过其他人，并没有得到我需要的明确答案，所以这是我的版本。：）

我有两个表...一个是DataTable（不是那个真正重要的），带有一个属性列表（想想家园）。我附近有另一个空表，当我点击属性行的复选框时，我希望它从第一个表（“可用属性”）消失时移动到另一个表（也称为“选定属性”）。然后，当您单击新表中的复选框时，我希望反向发生。

我从Available到Selected工作正常：

$(".selectProperty").click(function() {
    var tr = $(this).closest("tr").clone();

    $(".selectedPropsTable tbody").append(tr);
    $(this).closest("tr").remove();

    $(".selectedPropsTable .selectProperty").each(function() {
        $(this).attr("checked", false);
        $(this).removeClass("selectProperty");
        $(this).addClass("selectedProperty");
    });

});

但是当我做大部分相同的事情时，它不起作用：

$(".selectedProperty").on("click", function() {
    var tr = $(this).closest("tr").clone();

    $(".searchTable tbody").append(tr);
    $(this).closest("tr").remove();

    $(".searchTable .selectedProperty").each(function() {
        $(this).attr("checked", false);
        $(this).removeClass("selectedProperty");
        $(this).addClass("selectProperty");         
    });

});

由于我在移动过程中更改了复选框的类名，因此我认为将一个选择器放入其中以获得其点击是可以的，但即使使用.on（）它也无法正常工作。它甚至不会发出警报（“嗨”），因此它根本不起作用。

示例表HTML。首先是“可用属性”表：

<table class=".searchTable">
  <tr>
    <td><input type="checkbox" class="selectProperty"></td>

现在是“选定的属性”表：

<table class=".selectedPropsTable">
  <tr>
    <td><input type="checkbox" class="selectedProperty"></td>

我要么输入了一些我看不到的东西，要么我做错了。请帮忙？：）

Answer 1

我希望您知道click()与on('click')之间的差异，您可以谷歌这个

你的错误只是写错了语法。

$(elemen).click(function(){})与$(elemen).on('click', function(){});

相同

正确的是：

$(parent).on('event', 'yourelement', function(){})

或者这意味着

$('.selectTable').on('click', '.selectProperty', function(){})

现在你的代码

$(function(){
	$("table").on('click', ".selectProperty, .selectedProperty", function() { 
		if($(this).hasClass('selectProperty'))
			var newTd= 'selectedProperty', newTbl='selectedPropsTable';
		else
			var newTd= 'selectProperty', newTbl='searchTable'; 
		$(this).prop('checked', false).attr('class', newTd);
		var tr = $(this).closest('tr');
		$('table.'+newTbl).find("tbody").append(tr.clone()); 
		tr.remove(); 
	});
});

<style>table{border:2px solid black;}</style>

<table class="searchTable"> 
	<tbody>
		<tr> <td><input type="checkbox" class="selectProperty">a1</td></tr>
		<tr> <td><input type="checkbox" class="selectProperty">a2</td></tr>
	</tbody>
</table>
<table class="selectedPropsTable"> 
	<tbody>
		<tr> <td><input type="checkbox" class="selectedProperty">b1</td></tr>
		<tr> <td><input type="checkbox" class="selectedProperty">b2</td></tr>
	</tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery：将一行从一个表移到另一个表然后再返回

1 个答案: