大家好！有人可以帮助我解决我的问题吗？过滤器代码来自 w3school。我的问题是当我在textbox中输入确切的名字或年龄时。没有排秀。除了我的thead之外，所有行都消失了.我想删除并显示表格行与我在文本框中输入的名称或年龄保持一致。我正在使用jQuery。
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tblBody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</head>
<body>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<button id="btnAdd">New</button>
<table id="tblData" border = "1px">
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tblBody">
</tbody>
</table>
<script>
var id = 1;
$(function() {
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
$("#btnAdd").bind("click", Add);
});
function Add() {
$("#tblBody").append(
"<tr>" +
"<td>" + id + "</td>" +
"<td><input type='text'></td>" +
"<td><input type='text'></td>" +
"<td><input type='text'></td>" +
"<td><button class='btnSave'>Save</button><button class='btnEdit'>Edit</button><button class='btnDelete'>Delete</button></td>" +
"</tr>");
$('#r2').hide();
$('#btnAdd').attr('disabled','disabled');
$('.btnEdit').attr('disabled','disabled');
$('.btnDelete').attr('disabled','disabled');
$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
id++;
};
function Save() {
var par = $(this).parent().parent();
var tdFirstName = par.children("td:nth-child(2)");
var tdLastName = par.children("td:nth-child(3)");
var tdAge = par.children("td:nth-child(4)");
var tdButtons = par.children("td:nth-child(5)");
tdFirstName.html(tdFirstName.children("input[type=text]").val());
tdLastName.html(tdLastName.children("input[type=text]").val());
tdAge.html(tdAge.children("input[type=text]").val());
tdFirstName.html("<input type='text' id='txtName' value='" + tdFirstName.html() + "'/>");
tdLastName.html("<input type='text' id='txtPhone' value='" + tdLastName.html() + "'/>");
tdAge.html("<input type='text' id='txtEmail' value='" + tdAge.html() + "'/>");
$('#btnAdd').removeAttr('disabled');
$('.btnSave').attr('disabled','disabled');
$('.btnEdit').removeAttr('disabled');
$('.btnDelete').removeAttr('disabled');
tdFirstName.find('input').attr('disabled', 'true');
tdLastName.find('input').attr('disabled', 'true');
tdAge.find('input').attr('disabled', 'true');
//$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
};
function Edit() {
var par = $(this).parent().parent();
var tdFirstName = par.children("td:nth-child(2)");
var tdLastName = par.children("td:nth-child(3)");
var tdAge = par.children("td:nth-child(4)");
var tdButtons = par.children("td:nth-child(5)");
tdFirstName.val("<input type='text' id='txtName' value='" + tdFirstName.html() + "'/>");
tdLastName.val("<input type='text' id='txtPhone' value='" + tdLastName.html() + "'/>");
tdAge.val("<input type='text' id='txtEmail' value='" + tdAge.html() + "'/>");
$('#btnAdd').attr('disabled','disabled');
$('.btnEdit').attr('disabled','disabled');
$('.btnSave').removeAttr('disabled');
$('.btnDelete').removeAttr('disabled');
$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
tdFirstName.find('input').removeAttr('disabled');
tdLastName.find('input').removeAttr('disabled');
tdAge.find('input').removeAttr('disabled');
};
function Delete() {
var par = $(this).parent().parent();
par.remove();
id = 1;
};
</script>
</body>
</html>
试试这个
而不是#tblBody tr在您要搜索的地方使用#tblBody tr input，并useval((instead oftext((' 以便它可以工作
$("#tblBody tr input").filter(function() {
$(this).toggle($(this).val().toLowerCase().indexOf(value) > -1)
});
找不到匹配项时删除行 试试这个代码
if($(this).val().toLowerCase().indexOf(value) > -1){
$(this).closest('tr').show();
// $(this).toggle($(this).val().toLowerCase().indexOf(value) > -1)
}else{
$(this).closest('tr').hide();
}