用JS和jQuery搜索HTML表格 [英] Search HTML table with JS and jQuery
本文介绍了用JS和jQuery搜索HTML表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我制作了一张桌子，并希望让它成为可搜索的，所以我用google搜索并在starckoverflow上查看。
但不知何故，我发现的东西，应该可以工作，不为我工作？
这里是代码，HTML和JS。
<！DOCTYPE html>
< html class =no-jslang =en>
< head>
< meta charset =utf-8/>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0/>
< meta name =authorcontent =C.Palma/>
< meta name =contentcontent =魔兽世界。角色。项目。学习2代码。 />
< title>魔兽世界角色。< / title>
< link rel =stylesheethref =css / foundation.css/>
< script src =js / modernizr.js>< / script>
< script type =text / javascript>
//文档准备就绪后：在body onload之前触发< img src ='http：//blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif'alt =':) 'class ='wp-smiley'/>
$（document）.ready（function（）{
//写入关键字输入元素
$（search）的keyup事件。 //当输入的值不为空时
if（$（this）.val（）！=）
{
//只显示匹配的TR，隐藏其余的
$（＃table tbody tr）。hide（）;
$（＃table td：contains-ci（'+ $（this）.val（）+'））。 parent（tr）。show（）;
}
else
{
//当没有输入或再次清理时，显示所有内容
$（ #table tbody tr）。show（）;
}
}）;
}）;
//不区分大小写的过滤器的jQuery表达式
$ .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>魔兽世界角色。 <小>我和我的兄弟，我们分享。< / small>< / h1>
< / div>
< div class =row large-centered>
< input type =textid =searchplaceholder =要搜索的类型.../>
< table id =tablewidth =100％>
< thead>
< tr>
字元名称< / th>
< th> Class< / th>
th realm< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>本杰明。< / td>
< td> Rogue。< / td>
< td>奥丹姆ES。< / td>
< / tr>
< tr>
< td> Cachoito。< / td>
< td> Hunter。< / td>
< td> Agamaggan EN。< / td>
< / tr>
< tr>
< td> Contemplario。< / td>
< td>圣骑士。< / td>
< td>奥丹姆ES。< / td>
< / tr>
< tr>
< td> Elthron。< / td>
< td>死亡骑士。< / 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>法师。< / td>
< td> Agamaggan EN。< / td>
< / tr>
< tr>
< td> Marselus。< / td>
< td>法师。< / td>
< td>奥丹姆ES。< / td>
< / tr>
< tr>
< td> Mistrala。< / td>
< td> Warrior。< / td>
< td>奥丹姆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>术士。< / td>
< td>奥丹姆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>
解决方案
写了一个工作小提琴
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/ ）;
I made a table and wanted to make it searchable, so I googled and looked here at starckoverflow.
But somehow, the things I've found, that should work, dont work for me?
Here is the code, both HTML and 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>
解决方案
I have put the part of your code that matters and wrote a working fiddle
http://jsfiddle.net/9hGym/602/
this is now the search engin:
var searchText = $(this).val().toLowerCase();
$.each($("#table tbody tr"), function() {
if($(this).text().toLowerCase().indexOf(searchText) === -1)
$(this).hide();
else
$(this).show();
});
you can also use http://www.datatables.net/ for such things ;)
这篇关于用JS和jQuery搜索HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
