Question

我有一个按钮，可以在div中加载下表：

<table id="id_table">
	<thead>
		<tr>
			<th>Code</th>
			<th>Description</th>
			<th>Group</th>
		</tr>
		<tr>
			<th><input type="text" id="txtcolumn1"/></th>
			<th><input type="text" id="txtcolumn2"/></th>
			<th><input type="text" id="txtcolumn3"/></th>
		</tr>            
	</thead>
	<tbody>
		<tr data="line1">
			<td data="column1">001.01-A</td>
			<td data="column2">Black bean</td>
			<td data="column3">Cereal</td>
		</tr>
		<tr data="line2">
			<td data="column1">001.02-B</td>
			<td data="column2">White bean</td>
			<td data="column3">Cereal</td>
		</tr>            
		<tr data="line3">
			<td data="column1">002.10-C</td>
			<td data="column2">Rice</td>
			<td data="column3">Cereal</td>
		</tr>
		<tr data="line4">
			<td data="column1">047.27-D</td>
			<td data="column2">Soap</td>
			<td data="column3">Cleaning</td>
		</tr>            
	</tbody>
</table>

我将使用输入来过滤表内容，并仅显示与加载表后每个输入上键入的值匹配的colmuns。要过滤表格，我正在使用事件'keyup'，如下所示：

$("#id_div_Content").on('keyup','#id_table input',function(){
	var indice = $(this).parent().index()+1;
	var valor = $(this).val().toUpperCase();
	$(this).parent().parent().parent().parent().find('tr').show();
	
	$(this).parent().parent().parent().parent().find('td').each(function(){
		var coluna = $(this).attr('data');
		if (coluna == "coluna" + indice.toString()) {
		    if($(this).text().toUpperCase().indexOf(valor) < 0){
			    $(this).parent().hide();
		    }
	    }
	});
});

我的疑问是：在这个'keyup'事件中，如何通过data，id或其他任何方式找到表的元素？ JQuery无法使用直接选择器找到这些元素，因为它是在单击按钮后在div中加载的html。

我使用$（this）.parent（）。parent（）。parent（）。parent（）从输入到达表id（例如），但这只是一个小测试而且在页面的最终版本将会复杂得多。我将有更多的表格和字段，这样我可能需要一英里的.parent（）才能到达元素。

从此感谢。

Answer 1

您可以在该keyup处理程序中使用普通选择器。由于您正在进行委托绑定，因此当该进程处理时，该元素将存在于dom中。所以你可以正常查找它们。

我可能会建议使用“column1”，“column2”和“column3”类而不是数据元素，但是如果你想通过它们选择它们。

编辑：除此之外，data="value"通常不是您使用数据元素的方式。通常，他们遵循data-key="value"的模式，然后您使用data('key')和data('key', newValue)

引用它们

JQuery通过id或其他方式查找加载的元素

1 个答案: