javascript 在 Html 中过滤表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21552714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Filter Table Row in Html
提问by Yatin
I have created a html page which has a search text and a table below with some data on it in the table.
我创建了一个 html 页面，它有一个搜索文本和一个下面的表格，表格中有一些数据。
I used the code available on JSFiddle.
我使用了JSFiddle 上可用的代码。
But it did not work. Please suggest something like the example shown.
但它没有用。请建议类似于所示示例的内容。
I am using a simple html, CSS and Javascript coding.
我正在使用简单的 html、CSS 和 Javascript 编码。
In this jQuery is used:
在这个 jQuery 中使用：
var $rows = $('#table td');
$('#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();
});
Can I have something simpler since this is a hybrid application?
由于这是一个混合应用程序，我可以做一些更简单的事情吗？
I am using the following code. Please check
我正在使用以下代码。请检查
<!DOCTYPE html>
<html>
<head>
<title>Search Box Example 2 - default placeholder text gets cleared on click</title>
<link rel="stylesheet" href="css/SalesTable.css">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- JAVASCRIPT to clear search text when the field is clicked -->
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">
var $rows = $('#table tr');
$('#tfq').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();
});
</script>
<!-- CSS styles for standard search box with placeholder text-->
</head>
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="http://www.google.com">
<input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" placeholder="Type to search"><input type="button" value="Search" class="tfbutton2">
</form>
<div class="tfclear"></div>
</div>
<br>
<br>
<div id="tableSalesOrder">
<table id="table">
<tr>
<th>
A
</th>
<th>
B
</th>
<th>
C
</th>
<th>
D
</th>
</tr>
<script language="javascript">
<!--
for(i =0 ;i<4 ; i++)
{
document.write('<tr>');
document.write('<td>12345</td>')
document.write('<td>34566</td>')
document.write('<td>345356</td>')
document.write('<td>Tyjhue</td>')
document.write('<td><form id="approveForm"><input type = "submit" value="ButtonA"></form></td>')
document.write('<td><form id="rejectForm"><input type = "submit" value="ButtonB"></form></td>')
document.write('<td><form id="detailForm"><input type = "submit" value="ButtonC"></form></td>')
document.write('</tr>')
}
//-->
</script>
</table>
</div>
</body>
</html>
回答by Karthikeyan
include Jquery
包括 Jquery
<head>
<style type="text/css">
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
</style>
</head>
<body>
<input type="text" id="search" placeholder="Type to search">
<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>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">
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();
});
</script>
</body>
Run the code,
运行代码，
回答by Hashem Qolami
The JavaScript code should be interpreted after the DOM is ready.
JavaScript 代码应该在 DOM 准备好后进行解释。
Since you're using the script in the <head>section, #table trelements are not ready yet; Hence the jQuery is unable to select the elements.
由于您正在使用该<head>部分中的脚本，#table tr元素尚未准备就绪；因此 jQuery 无法选择元素。
You could use .ready()method to check whether the documentis ready:
您可以使用.ready()方法来检查是否document准备好：
$(document).ready(function() {
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();
});
});
Or put your <script>...</script>tag at the bottom, right before </body>end tag.
或者将您的<script>...</script>标签放在底部，就在</body>结束标签之前。
Further info: http://learn.jquery.com/using-jquery-core/document-ready/
更多信息：http: //learn.jquery.com/using-jquery-core/document-ready/
