[英]How to search with category in JavaScript?
我在做作业时遇到了一些问题。 我想用 JavaScript 实现对特定类别或所有类别的搜索。 我搜索了 web,但发现了关于这个主题的大量代码。
我想要的是tr
搜索,而不是th
或td
搜索。
如果您查看此 W3schools 链接https://www.w3schools.com/howto/howto_js_filter_table.asp它是“td”搜索。
我的代码是
$('.category_item').click(function() {
$(this).addClass('on').siblings().removeClass('on');
var category = $(this).attr('id');
if(category == 'all') {
$('tr').hide().show();
} else {
$('tr').hide();
$('.' + category).show();
}
}); // click
$('.inputSearch').keydown(function(key) {
var value = $(this).val().toLowerCase();
if(key.keyCode == 13) {
$("tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
} // if
}); // search
<main class="listWrap">
<div class="listTitle">
<h3>Category</h3>
<div class="category">
<button class="category_item on" id="all">전체</button>
<button class="category_item" id="a">a</button>
<button class="category_item" id="b">b</button>
<button class="category_item" id="c">c</button>
<button class="category_item" id="d">d</button>
</div>
<div class="searchArea">
<input class="inputSearch" type="text" id="myInput" onkeyup="search()" placeholder="제목, 작성자이름으로 검색">
</div>
</div>
<div class="listTableWrap">
<table class="listTable" id="myTable">
<tbody>
<tr class="a recomm">
<td class="num"><span class="rec">추천</span></td>
<td></td>
<td class="project"><a href="/step1/content.jsp"></a></td>
<td class=""></td>
<td class="name"></td>
</tr>
<tr class="b recomm">
<td class="num"><span class="rec">추천</span></td>
<td></td>
<td class="project"><a href="/step1/content.jsp"></a></td>
<td class=""></td>
<td class="name"></td>
</tr>
<tr class="recomm c">
<td class="num"><span class="rec">추천</span></td>
<td></td>
<td class="project"><a href="/step1/content.jsp"></a></td>
<td class=""></td>
<td class="name"></td>
</tr>
<tr class="b">
<td class="num">13</td>
<td></td>
<td class="project"><a href="/step1/content.jsp"></a></td>
<td class=""></td>
<td class="name"></td>
</tr>
<tr class="d">
<td class="num">3</td>
<td></td>
<td class="project"><a href="/step1/content.jsp"></a></td>
<td class=""></td>
<td class="name"></td>
</tr>
<tr class="c">
<td class="num">2</td>
<td></td>
<td class="project"><a href="/step1/content.jsp"></a></td>
<td class=""></td>
<td class="name"></td>
</tr>
</tbody>
</table>
</div>
</main>
如果您查看 html 表的结构,您会发现tr
元素本身不包含任何数据,只有td
和th
元素可以。
如果您想通过表格进行文本搜索,您应该始终将查询字符串与单元格的内容进行比较。
不过,好消息是,您希望如何显示搜索结果实际上是另一回事,您可以通过检索匹配单元格的父行来按行显示结果。
var query = $(this).val().toLowerCase();
if(key.keyCode === 13) {
// Restore all rows if query is empty
if (query === '') {
$("tbody tr").show();
return;
}
// Search form matching cells
var matchingCells = $("tbody tr td")
.filter(function() {
return $(this).text().toLowerCase().indexOf(query) > -1
});
// Start by hiding all rows
$("tbody tr").hide();
// Retrieve the matching cells' parent rows and show them
matchingCells.each(function() { $(this).parents('tr').show(); })
} // if
}); // search
如果你想试试这个,我已经做了一个codepen
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.