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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

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;

}

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


查看完整回答
反對 回復 2023-10-14
  • 2 回答
  • 0 關注
  • 132 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號