考慮以下片段：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”的產品 1 和 2，“Hands”的產品應該被隱藏......，如果我輸入“手”、“臉”，它的產品應該被隱藏，等等......我已經有以下 jQuery 代碼可以運行，但是如果我在搜索字段中輸入“Face”，它會顯示“Face”，但不會顯示相應的產品 1 和 2....現在我應該也顯示產品 1 和 2，并隱藏所有其余的......
3 回答
隔江千里
TA貢獻1906條經驗 獲得超10個贊
這是一個使用 jquery 的解決方案.nextUntil。
獲取所有“標題”行（在本例中為
strong第一個 td 中的行）找到與輸入匹配的
隱藏所有行（從頭開始）
循環遍歷每個匹配的標題行
使用 .nextUntil 查找下一個標題行（但不包括它（如“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貢獻1818條經驗 獲得超8個贊
data向行添加標識屬性有很大幫助，并使 JavaScript 代碼變得非常簡單。
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();
}
});
});
現場演示：https://jsfiddle.net/bkxLf3p0/
編輯：我添加toLowerCase()了字符串比較（=不區分大小寫的搜索），因為它對我來說似乎很有用
開滿天機
TA貢獻1786條經驗 獲得超13個贊
首先，我修復了 HTML 中的一個小錯誤，即strong標簽未正確終止。此外，我刪除了對第一行的檢查，因為這意味著Face無論搜索值如何，都會始終顯示第一行。
為了解決這個問題，我使用一個布爾變量shouldShow來指示是否應顯示當前行。
該代碼像以前一樣迭代表行，然后驗證當前行是否包含標簽strong。如果是，它會確定這是否與正在搜索的內容匹配并進行shouldShow適當的設置。
shouldShow然后用于確定是顯示還是隱藏該行。請參閱下面的工作片段：
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 關注
- 174 瀏覽
添加回答
舉報
0/150
提交
取消