考慮以下片段：jQuery(".zoekopcat").on("keyup", function() { var value = jQuery(this).val(); jQuery("table tr").each(function(index) { if (index !== 0) { row = jQuery(this); var id = row.find("strong:contains(" + value + ")").text(); if (id.indexOf(value) !== -1) { row.show(); } else { row.hide(); } } });})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="text" class="zoekopcat"><table> <tr> <td colspan=7><strong>Face</strong</td> </tr> <tr> <td>Product1</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>Product2</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td colspan=7><strong>Hands</strong</td> </tr> <tr> <td>Product1</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>Product2</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr></table>例如，如果我在搜索字段中輸入“Face”，我希望它顯示帶有“Face”的 tr td 以及“Face”的產(chǎn)品 1 和 2，“Hands”的產(chǎn)品應(yīng)該被隱藏......，如果我輸入“手”、“臉”，它的產(chǎn)品應(yīng)該被隱藏，等等......我已經(jīng)有以下 jQuery 代碼可以運(yùn)行，但是如果我在搜索字段中輸入“Face”，它會(huì)顯示“Face”，但不會(huì)顯示相應(yīng)的產(chǎn)品 1 和 2....現(xiàn)在我應(yīng)該也顯示產(chǎn)品 1 和 2，并隱藏所有其余的......
3 回答
隔江千里
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超10個(gè)贊
這是一個(gè)使用 jquery 的解決方案.nextUntil。
獲取所有“標(biāo)題”行（在本例中為
strong第一個(gè) td 中的行）找到與輸入匹配的
隱藏所有行（從頭開始）
循環(huán)遍歷每個(gè)匹配的標(biāo)題行
使用 .nextUntil 查找下一個(gè)標(biāo)題行（但不包括它（如“until”中））
顯示之間的行
$(".zoekopcat").on("keyup", function() {
var val = $(this).val().toUpperCase();
var headerRows = $("table tr td:first-child>strong").closest("tr");
var matchRows = headerRows.filter((i,e) =>
$(e).text().toUpperCase().indexOf(val) >= 0);
$("table tr").hide();
matchRows.each(function() {
$(this).show().nextUntil(headerRows).show();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="zoekopcat">
<table>
<tr>
<td colspan=7><strong>Face</strong></td>
</tr>
<tr>
<td>Product1</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>Product2</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td colspan=7><strong>Hands</strong></td>
</tr>
<tr>
<td>Product1</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>Product2</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
弒天下
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超8個(gè)贊
data向行添加標(biāo)識(shí)屬性有很大幫助，并使 JavaScript 代碼變得非常簡(jiǎn)單。
HTML：
<input type="text" class="zoekopcat">
<table>
<tr data-category="Face">
<td colspan="7"><strong>Face</strong></td>
</tr>
<tr data-category="Face">
<td>Product1</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr data-category="Face">
<td>Product2</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr data-category="Hands">
<td colspan="7"><strong>Hands</strong></td>
</tr>
<tr data-category="Hands">
<td>Product3</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr data-category="Hands">
<td>Product4</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
JavaScript：
jQuery(".zoekopcat").on("keyup", function() {
var value = jQuery(this).val();
jQuery("table tr").each(function() {
var rowCat = $(this).data('category');
if (rowCat.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
現(xiàn)場(chǎng)演示：https://jsfiddle.net/bkxLf3p0/
編輯：我添加toLowerCase()了字符串比較（=不區(qū)分大小寫的搜索），因?yàn)樗鼘?duì)我來說似乎很有用
開滿天機(jī)
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊
首先，我修復(fù)了 HTML 中的一個(gè)小錯(cuò)誤，即strong標(biāo)簽未正確終止。此外，我刪除了對(duì)第一行的檢查，因?yàn)檫@意味著Face無論搜索值如何，都會(huì)始終顯示第一行。
為了解決這個(gè)問題，我使用一個(gè)布爾變量shouldShow來指示是否應(yīng)顯示當(dāng)前行。
該代碼像以前一樣迭代表行，然后驗(yàn)證當(dāng)前行是否包含標(biāo)簽strong。如果是，它會(huì)確定這是否與正在搜索的內(nèi)容匹配并進(jìn)行shouldShow適當(dāng)?shù)脑O(shè)置。
shouldShow然后用于確定是顯示還是隱藏該行。請(qǐng)參閱下面的工作片段：
jQuery(".zoekopcat").on("keyup", function() {
var value = jQuery(this).val();
var shouldShow = false;
jQuery("table tr").each(function(index) {
row = jQuery(this);
if (row.find("strong").length) {
var id = row.find("strong:contains(" + value + ")").text();
if (id.indexOf(value) !== -1) {
shouldShow = true;
} else {
shouldShow = false;
}
}
if (shouldShow) {
row.show();
} else {
row.hide();
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="zoekopcat">
<table>
<tr>
<td colspan=7><strong>Face</strong></td>
</tr>
<tr>
<td>Product1</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>Product2</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td colspan=7><strong>Hands</strong></td>
</tr>
<tr>
<td>Product1</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>Product2</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
- 3 回答
- 0 關(guān)注
- 170 瀏覽
添加回答
舉報(bào)
0/150
提交
取消