我从堆栈溢出本身引用了以下代码。但它不起作用,任何人都可以告诉我应该更新这段代码。
var $rows = $('#table 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();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<html>
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><input type="text" id="search" placeholder="Type to search"></center>
<center><table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table></center>
</body>
</html>
到目前为止,这些简单的概念都在挣扎。所以请帮助我。
最佳答案
If i type ap or apple means the correspondent values only should display other than should hide
请注意,不确定预期结果是否是切换 td
元素?由于问题中的 js
似乎切换 tr
元素?要切换文本输入与 td
文本匹配的 td
元素,请尝试在调用 .show( )
将过滤 td
元素替换为父 tr
元素
如果只输入“app”td
包含文本“Apple”应该显示
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.find("td").show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<html>
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><input type="text" id="search" placeholder="Type to search"></center>
<center><table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table></center>
</body>
</html>
关于javascript - 键入时搜索并显示表值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33386408/