我做了一张桌子，想让它可以搜索，所以我用谷歌搜索并看了一下starckoverflow。
但不知何故，我发现的那些应该有用的东西，对我不起作用？
以下是HTML和JS的代码。
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="C.Palma" />
<meta name="content" content="World of Warcraft. Characters. Project. Learn 2 Code." />
<title>World of Warcraft Characters.</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/modernizr.js"></script>
<script type="text/javascript">
// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
$(document).ready(function(){
// Write on keyup event of keyword input element
$("search").keyup(function(){
// When value of the input is not blank
if( $(this).val() != "")
{
// Show only matching TR, hide rest of them
$("#table tbody tr").hide();
$("#table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
// When there is no input or clean again, show everything back
$("#table tbody tr").show();
}
});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
</script>
</head>
<body>
<div class="row large-centered">
<h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
</div>
<div class="row large-centered">
<input type="text" id="search" placeholder="Type to search..." />
<table id="table" width="100%">
<thead>
<tr>
<th>Character name</th>
<th>Class</th>
<th>Realm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Benjamin.</td>
<td>Rogue.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Cachoito.</td>
<td>Hunter.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Contemplario.</td>
<td>Paladin.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Elthron.</td>
<td>Death Knight.</td>
<td>Agamaggan ES.</td>
</tr>
<tr>
<td>Giloh.</td>
<td>Priest.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Kitialamok.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Magustroll.</td>
<td>Mage.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Marselus.</td>
<td>Mage.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Mistrala.</td>
<td>Warrior.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Suavemente.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Tittus.</td>
<td>Monk.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Yarlokk.</td>
<td>Warlock.</td>
<td>Uldum ES.</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
答案 0 :(得分：34)
我已经把你的代码部分重要了，并写了一个工作小提琴
http://jsfiddle.net/9hGym/602/
现在是搜索引擎：
var searchText = $(this).val().toLowerCase();
$.each($("#table tbody tr"), function() {
if($(this).text().toLowerCase().indexOf(searchText) === -1)
$(this).hide();
else
$(this).show();
});
你也可以使用http://www.datatables.net/来做这些事情;）
答案 1 :(得分：4)
我发现上述解决方案在理论上很好（尽管它没有用），但我发现这样做更好：
$('#search-field').on('keyup', function(e) {
if ('' != this.value) {
var reg = new RegExp(this.value, 'i'); // case-insesitive
$('.table tbody').find('tr').each(function() {
var $me = $(this);
if (!$me.children('td:first').text().match(reg)) {
$me.hide();
} else {
$me.show();
}
});
} else {
$('.table tbody').find('tr').show();
}
});
如果您想搜索多个列，只需更改：
if (!$me.children('td:first').text().match(reg)) {
要：
if (!$me.children('td').text().match(reg)) {
答案 2 :(得分：0)
发布的方式对我的桌子来说有点慢。我想出了一个似乎更快的不同解决方案。
如果要搜索每个单元格，可以向单元格添加属性（我使用数据名称），例如：<td data-name="john smith">John Smith</td>。然后你可以使用这个javascript代码：
$("#search").keyup(function() {
var val = this.value.trim().toLowerCase();
if ('' != val) {
var split = val.split(/\s+/);
var selector = 'td';
for(var i=0;i<split.length;i++){
selector = selector+'[data-name*='+split[i]+']';
}
$('tr').hide();
$(selector).closest('tr').show();
} else {
$('tr').show();
}
});
如果您只想搜索行中的单个属性，只需将该属性添加到<tr data-name="john smith"><td>John Smith</td><td>...</td></tr>行即可，并使用以下内容：
$("#search").keyup(function() {
var val = this.value.trim().toLowerCase();
if ('' != val) {
var split = val.split(/\s+/);
var selector = 'tr';
for(var i=0;i<split.length;i++){
selector = selector+'[data-name*='+split[i]+']';
}
$('tr').hide();
$(selector).show();
} else {
$('tr').show();
}
});
希望有所帮助！
答案 3 :(得分：0)
我在项目中使用了这个精确的代码片段以使表可搜索
<script>
$(document).ready(function () {
$("#input").on("keyup", function () { //here #input textbox id
var value = $(this).val().toLowerCase();
$("#table tr").filter(function () { //here #table table body id
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
别忘了添加
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
答案 4 :(得分：-1)
您可以使用此代码。它工作得很好。
$('#search').keydown(function () {
var searchitem = $('#search').val();
if (searchitem == '' || searchitem == null || searchitem == undefined) {
$('#table tbody tr').show();
}
else {
searchitem = searchitem.toUpperCase();
$('#table tbody tr').hide();
$('#table tbody tr').each(function () {
if ($(this).text().indexOf(searchitem) > -1) {
$(this).show();
}
});
}
});