使用 rowspan 在表行中进行实时搜索

Question

我有一个表，其中第一列包含行跨度。我有一个代码，但当我搜索时它崩溃了。我的桌子看起来像这样：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>

Answer 1

看看 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/

Answer 2

以下应该可以解决问题。我希望它仍然对某人有帮助：

$("#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 );