2 回答

TA貢獻1785條經驗 獲得超4個贊
看看 jsfiddle [這里][1]
$("#search").on("keyup", function() {
$("td").closest("tr").hide()
var value = $(this).val();
if (value) {
$("td:contains('"+value+"')").closest("tr").show()
}
else {
$("td").closest("tr").show()
}
});
更新了考慮行跨度的代碼: https://jsfiddle.net/nbys6fqm/ [1]: https: //jsfiddle.net/c6nopaes/

TA貢獻1824條經驗 獲得超6個贊
以下應該可以解決問題。我希望它仍然對某人有幫助:
$("#search").focus().on("keyup", function () {
var value = $(this).val();
var trs=$("table tr:nth-child(n+2)");
for (let i=0;i<trs.length;){
let grp=$(trs.slice(i,i+=trs[i].children[0].rowSpan));
$(grp).toggle( !!$('td:contains('+value+')', grp).length );
}
});
td {
border: 1px solid gray;
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>XY</th>
<th>ZW</th>
</tr>
<tr>
<td rowspan="2">321</td>
<td>242</td>
</tr>
<tr>
<td>513256</td>
</tr>
<tr>
<td>33131</td>
<td>13</td>
</tr>
<tr>
<td>4131</td>
<td>334132</td>
</tr>
<tr>
<td rowspan="3">51311</td>
<td>54424</td>
</tr>
<tr>
<td>54424</td>
</tr>
<tr>
<td>5442</td>
</tr>
<tr>
<td>511</td>
<td>544</td>
</tr>
</table>
<br />
<input type="text" id="search" placeholder=" live search"s></input>
該操作發生在以下幾行中:
var trs=$("table tr:nth-child(n+2)");
jQuery 對象trs
保存標題行下方的所有表記錄。在循環中, for (let i=0;i<trs.length;){...}
這些s 將根據每個記錄中第一個屬性<tr>
的內容進行分組:rowspan
<td>
trs[i]
let grp=$(trs.slice(i,i+=trs[i].children[0].rowSpan));
這個新創建的組現在是toggle()
-d (即顯示或隱藏)基于 !!$('td:contains('+value+')'
(--> 該表達式返回一個布爾值)。
$(grp).toggle( !!$('td:contains('+value+')', grp).length );
添加回答
舉報