[英]How to search with category in JavaScript?
I had some problem while doing homework.我在做作业时遇到了一些问题。 I want to implement a search for specific category or all category with JavaScript.
我想用 JavaScript 实现对特定类别或所有类别的搜索。 I searched the web, but found bulky code about this subject.
我搜索了 web,但发现了关于这个主题的大量代码。
What I want is tr
search, not th
or td
search.我想要的是
tr
搜索,而不是th
或td
搜索。
If you look this W3schools link https://www.w3schools.com/howto/howto_js_filter_table.asp it is 'td' search.如果您查看此 W3schools 链接https://www.w3schools.com/howto/howto_js_filter_table.asp它是“td”搜索。
My code is我的代码是
$('.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>
If you look at how an html table is structured, you will see that a tr
element does not hold any data by itself, only td
and th
elements do.如果您查看 html 表的结构,您会发现
tr
元素本身不包含任何数据,只有td
和th
元素可以。
If you want to do a text search through your table, you should always compare your query string to the content of cells.如果您想通过表格进行文本搜索,您应该始终将查询字符串与单元格的内容进行比较。
Good news, though, how you want to display your search results is actually a different matter and you can display the results by row, by retrieving the matching cells' parent rows.不过,好消息是,您希望如何显示搜索结果实际上是另一回事,您可以通过检索匹配单元格的父行来按行显示结果。
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
I have made a codepen if you want to try this out如果你想试试这个,我已经做了一个codepen
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.