Question

当在表中搜索第一个数据时，它不显示跨度值。表格对齐方式也发生了变化。

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

}）;

<input id="myInput" type="text" placeholder="Search..">
<table>
  <thead>
  <tr>
    <th>header1</th>
    <th>header2</th>
    <th>header3</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td rowspan="3">John</td>
    <td>Doe</td>
  <td>john@example.com</td>
  </tr>
  <tr>
    <td>Moe</td>
    <td>mary@mail.com</td>
  </tr>
  <tr>
    <td>Dooley</td>
    <td>july@greatstuff.com</td>
  </tr>
  <tr>
   <td>Anja</td>
   <td>Ravendale</td>
   <td>a_r@test.com</td>
  </tr>
  </tbody>
 </table>

当我搜索john想要显示Moe，Doe，Dooley的所有三个数据时

预先感谢

Answer 1

我的建议是，首先循环搜索带有rowspan单元格的行，然后将其输入文本，并使用data()将其添加到涉及的所有行中

然后在filter()中检查行data()和text()

类似：

$(function() {

  var $rows = $('#myTable tr');

  $rows.filter(':has(td[rowspan])').each(function() {
    var $row = $(this),
      rowIdx = $row.index(),
      $spanCell = $row.find('[rowspan]'),
      txt = $spanCell.text().trim().toLowerCase(),
      rowspan = +$spanCell.attr('rowspan');

    $rows.slice(rowIdx, rowIdx + rowspan).data('spanTxt', txt);
  });


  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    // show all when no value
    if(!value){
       $rows.show();
       return
    }    
    
    // hide all , then filter ones to show
    $rows.hide().filter(function() {
      var $row = $(this),
        txt = $row.text().toLowerCase(),
        spanTxt = $row.data('spanTxt') || '';            
       
      // true if either data or row text includes search term
      return txt.includes(value) || spanTxt.includes(value)
    }).show();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search..">
<table>
  <thead>
    <tr>
      <th>header1</th>
      <th>header2</th>
      <th>header3</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td rowspan="3">John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Moe</td>
      <td>mary@mail.com</td>
    </tr>
    <tr>
      <td>Dooley</td>
      <td>july@greatstuff.com</td>
    </tr>
    <tr>
      <td>Anja</td>
      <td>Ravendale</td>
      <td>a_r@test.com</td>
    </tr>
  </tbody>
</table>

对于连续多个rowspan，您可能需要将数据设置为数组而不是字符串

搜索时如何显示所有行跨度数据

1 个答案: