首頁猿問使用 rowspan...

使用 rowspan 在表行中進行實時搜索

JavaScript

HUH函數 2023-10-14 18:39:13

我有一個表，其中第一列包含行跨度。我有一個代碼，但當我搜索時它崩潰了。我的桌子看起來像這樣：Table。$("#search").on("keyup", function () { var value = $(this).val(); $("table tr").each(function (index) { if (index !== 0) { $row = $(this); var id = $row.find("td:first").text(); if (id.indexOf(value) !== 0) { $row.hide(); } else { $row.show(); } } });});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"></input>

查看完整描述

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/

反對回復 2023-10-14

慕妹3242003

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;

}

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

該操作發生在以下幾行中：

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 );

反對回復 2023-10-14

2 回答
0 關注
132 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 rowspan 在表行中進行實時搜索

使用 rowspan 在表行中進行實時搜索

2 回答

添加回答