基本上我目前有一个使用.keyup（）函数工作的搜索栏，当用户输入一个值时，返回正确的row / s并隐藏其他行。我正在努力学习如何做到这一点（使用.click（）但我的jQuery / javascript知识并不太强大）。有人可以帮我调整我当前的功能，以便搜索栏的内容仅用于在单击搜索按钮时搜索表而不是用户正在键入。非常感谢。
HTML：
<h2>Customer Data</h2>
<p>Below shows all the relevant customer data, rows can be edited, added, removed and moved up and down in the table.</p>
<div id="table" class="table-editable" style="width:1000px; text-align: left;">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<thread>
<tr>
<th width="300">Customer Name</th>
<th width="250">Postcode</th>
<th width="200">Telephone No</th>
<th width="150">Remove</th>
<th width="100">Adjust Row</th>
</tr>
</thread>
<tbody>
<tr>
<td width="300"><div contenteditable>Adam Greenwood</div>
<td width="250"><div contenteditable>GU17 0DL</div>
<td width="200"><div contenteditable>01252445567</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Sam Test</div>
<td width="250"><div contenteditable>GU47 7GR</div>
<td width="200"><div contenteditable>01276122047</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Mark Colin</div>
<td width="250"><div contenteditable>YA32 3DM</div>
<td width="200"><div contenteditable>44+7449929147</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Frank Wright</div>
<td width="250"><div contenteditable>SF65 7YY</div>
<td width="200"><div contenteditable>00866451340</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Arnold Carrol</div>
<td width="250"><div contenteditable>LE22 2WQ</div>
<td width="200"><div contenteditable>05429552095</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Thomas Gallagher</div>
<td width="250"><div contenteditable>YL66 7FF</div>
<td width="200"><div contenteditable>94232520682</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Stephen Major</div>
<td width="250"><div contenteditable>SA12 6TG</div>
<td width="200"><div contenteditable>54295650429</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Neil Reynolds</div>
<td width="250"><div contenteditable>MU70 6XC</div>
<td width="200"><div contenteditable>40768991327</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Jeff Reinbold</div>
<td width="250"><div contenteditable>RG10 7HM</div>
<td width="200"><div contenteditable>01865439</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td width="300"><div contenteditable>Empty</div>
<td width="250"><div contenteditable>Empty</div>
<td width="200"><div contenteditable>Empty</div>
<td width="150"><span class="table-remove glyphicon glyphicon-remove"></span></td>
<td width="100"><span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</tbody>
</table>
<input type="text" id="search" placeholder="Type to search..." />
<br />
<br />
<button>Search</button>
</div>
搜索功能：
<script>
$("#search").keyup(function(){
_this = this;
$.each($("#table tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
</script>
答案 0 :(得分：1)
首先，在搜索按钮中添加ID：
<button id="search-button">Search</button>
然后将click事件添加到jQuery代码中。
试试这个：
$("#search-button").click(function(){
$.each($("#table tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($('#search').val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Customer Data</h2>
<p>Below shows all the relevant customer data, rows can be edited, added, removed and moved up and down in the table.</p>
<div id="table" class="table-editable" style="width:1000px; text-align: left;">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<thread>
<tr>
<th width="300">Customer Name</th>
<th width="250">Postcode</th>
<th width="200">Telephone No</th>
<th width="150">Remove</th>
<th width="100">Adjust Row</th>
</tr>
</thread>
<tbody>
<tr>
<td width="300"><div contenteditable>Adam Greenwood</div>
<td width="250"><div contenteditable>GU17 0DL</div>
<td width="200"><div contenteditable>01252445567</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Sam Test</div>
<td width="250"><div contenteditable>GU47 7GR</div>
<td width="200"><div contenteditable>01276122047</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Mark Colin</div>
<td width="250"><div contenteditable>YA32 3DM</div>
<td width="200"><div contenteditable>44+7449929147</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Frank Wright</div>
<td width="250"><div contenteditable>SF65 7YY</div>
<td width="200"><div contenteditable>00866451340</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Arnold Carrol</div>
<td width="250"><div contenteditable>LE22 2WQ</div>
<td width="200"><div contenteditable>05429552095</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Thomas Gallagher</div>
<td width="250"><div contenteditable>YL66 7FF</div>
<td width="200"><div contenteditable>94232520682</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Stephen Major</div>
<td width="250"><div contenteditable>SA12 6TG</div>
<td width="200"><div contenteditable>54295650429</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Neil Reynolds</div>
<td width="250"><div contenteditable>MU70 6XC</div>
<td width="200"><div contenteditable>40768991327</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Jeff Reinbold</div>
<td width="250"><div contenteditable>RG10 7HM</div>
<td width="200"><div contenteditable>01865439</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td width="300"><div contenteditable>Empty</div>
<td width="250"><div contenteditable>Empty</div>
<td width="200"><div contenteditable>Empty</div>
<td width="150"><span class="table-remove glyphicon glyphicon-remove"></span></td>
<td width="100"><span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</tbody>
</table>
<input type="text" id="search" placeholder="Type to search..." />
<br />
<br />
<button id="search-button">Search</button>
</div>
答案 1 :(得分：0)
id添加搜索按钮
<button id="btn_search">Search</button> //add id
.find('td:eq(0)')获取表格（名称）
$("#btn_search").on('click', function() {
$("table tbody tr").each(function(index) {
if($(this).find('td:eq(0)').text().toLowerCase().indexOf($('#search').val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
})
答案 2 :(得分：0)
让我们开始在搜索按钮中添加id属性：
<button id="doSearch">Search</button>
然后在你的javascript函数中，只需在按钮点击事件上绑定一个闭包：
$("doSearch").on('click', function() {
var needle = $('#search').val().toLowerCase();
$.each($("#table tbody tr"), function() {
var haystack = $(this).text().toLowerCase();
if(haystack.indexOf(needle) == -1)
$(this).hide();
else
$(this).show();
});
});
在上面的代码中，我甚至只做了一次小改进保存“针”值。每次$ .each循环时，在你的代码片段中，它必须找到DOM元素，获取值并将其设置为小写。