我有一个示例代码
Search:<input type="search" class="form-control" id="search">
<table id="gwAssignForm"><tbody></tbody></table>
我的jquery:
$(document).ready(function() {
$.ajax({
type: "POST",
url: "content.php",
data: {},
async : false,
success: function(result) {
$('#gwAssignForm tbody').html(result.html);
},
error : function(xhr, status){
console.log(status);
},
});
var $rows = $('#gwAssignForm tbody tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/'s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
在content.php <tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
加载ajax内容后。我开始搜索,但没有成功。如何解决这个问题?
它不起作用,因为您试图在加载ajax数据之前向$rows
添加元素。你只需要在你的keyup
函数中声明$rows
。
只需改变这个-
var $rows = $('#gwAssignForm tbody tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/'s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
to this -
$('#search').keyup(function() {
var $rows = $('#gwAssignForm tbody tr');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/'s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
由于表数据是动态添加的,$rows
将是表中的初始行,因此需要在动态添加表数据后更新$rows
$(document).ready(function() {
var $rows = $('#gwAssignForm tbody tr');
$.ajax({
type: "POST",
url: "content.php",
data: {},
async : false,
success: function(result) {
$('#gwAssignForm tbody').html(result.html);
$rows = $('#gwAssignForm tbody tr');
// update '$rows' after table content is added
},
error : function(xhr, status){
console.log(status);
},
});
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/'s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});