As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center用于指导。
6年前关闭。
我已经用HTML创建了一个表,并希望集成一个搜索框。我该怎么做?你能推荐一个好的jQuery插件还是更好的完整教程?
使用以下(x)html:
JS Fiddle demo。
编辑为使用
Demo at JS Fiddle。
要淡出不包含搜索结果的表格单元格,可以使用以下命令:
查询:
css:
Demo at JS Fiddle。
6年前关闭。
我已经用HTML创建了一个表,并希望集成一个搜索框。我该怎么做?你能推荐一个好的jQuery插件还是更好的完整教程?
最佳答案
使用jQuery的快速而肮脏的方法:
$(document).ready(
function(){
$('#searchbox').keyup(
function(){
var searchText = $(this).val();
if (searchText.length > 0){
$('td:contains(' + searchText +')')
.css('background-color','#f00');
$('td:not(:contains('+searchText+'))')
.css('background-color','#fff');
}
});
});
使用以下(x)html:
<table>
<thead>
<tr>
<td colspan="2">
<label for="searchbox">Search:</label>
<input type="text" id="searchbox" />
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Something</td>
<td>More text</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>blah?</td>
</tr>
</tbody>
</table>
JS Fiddle demo。
编辑为使用
addClass()
/removeClass()
,而不是在jQuery本身中设置css:$(document).ready(
function(){
$('#searchbox').keyup(
function(){
var searchText = $(this).val();
if (searchText.length > 0){
$('td:contains(' + searchText +')')
.addClass('searchResult');
$('td:not(:contains('+searchText+'))')
.removeClass('searchResult');
}
else if (searchText.length == 0) {
$('td.searchResult')
.removeClass('searchResult');
}
});
});
Demo at JS Fiddle。
要淡出不包含搜索结果的表格单元格,可以使用以下命令:
查询:
$(document).ready(
function(){
$('#searchbox').keyup(
function(){
var searchText = $(this).val();
if (searchText.length > 0) {
$('tbody td:contains('+searchText+')')
.addClass('searchResult');
$('.searchResult')
.not(':contains('+searchText+')')
.removeClass('searchResult');
$('tbody td')
.not(':contains('+searchText+')')
.addClass('faded');
$('.faded:contains('+searchText+')')
.removeClass('faded');
}
else if (searchText.length == 0) {
$('.searchResult').removeClass('searchResult');
$('.faded').removeClass('faded');
}
});
});
css:
td.faded {
opacity: 0.2;
}
Demo at JS Fiddle。