使用 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]&nbsp;$("#search").on("keyup", function() {&nbsp; &nbsp; &nbsp; &nbsp; $("td").closest("tr").hide()&nbsp; &nbsp; var value = $(this).val();&nbsp; &nbsp; if (value) {&nbsp; &nbsp; &nbsp; &nbsp; $("td:contains('"+value+"')").closest("tr").show()&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; $("td").closest("tr").show()&nbsp; &nbsp; }});更新了考虑行跨度的代码：&nbsp;https://jsfiddle.net/nbys6fqm/&nbsp;[1]： https:&nbsp;//jsfiddle.net/c6nopaes/

Answer 2

以下应该可以解决问题。我希望它仍然对某人有帮助：$("#search").focus().on("keyup", function () {&nbsp; var value = $(this).val();&nbsp; var trs=$("table tr:nth-child(n+2)");&nbsp; for (let i=0;i<trs.length;){&nbsp; &nbsp; let grp=$(trs.slice(i,i+=trs[i].children[0].rowSpan));&nbsp; &nbsp; $(grp).toggle( !!$('td:contains('+value+')', grp).length );&nbsp; }});td {&nbsp; border: 1px solid gray;&nbsp; padding: 4px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <tr>&nbsp; &nbsp; <th>XY</th>&nbsp; &nbsp; <th>ZW</th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td rowspan="2">321</td>&nbsp; &nbsp; <td>242</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>513256</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>33131</td>&nbsp; &nbsp; <td>13</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>4131</td>&nbsp; &nbsp; <td>334132</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td rowspan="3">51311</td>&nbsp; &nbsp; <td>54424</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>54424</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>5442</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>511</td>&nbsp; &nbsp; <td>544</td>&nbsp; </tr></table><br /><input type="text" id="search" placeholder="&nbsp; live search"s></input>该操作发生在以下几行中：var&nbsp;trs=$("table&nbsp;tr:nth-child(n+2)");jQuery 对象trs保存标题行下方的所有表记录。在循环中，&nbsp;for (let i=0;i<trs.length;){...}这些s 将根据每个记录中第一个属性<tr>的内容进行分组：rowspan<td>trs[i]let&nbsp;grp=$(trs.slice(i,i+=trs[i].children[0].rowSpan));这个新创建的组现在是toggle()-d （即显示或隐藏）基于&nbsp; !!$('td:contains('+value+')'（--> 该表达式返回一个布尔值）。$(grp).toggle(&nbsp;!!$('td:contains('+value+')',&nbsp;grp).length&nbsp;);