jQuery：通过搜索输入隐藏表格行，解决 td rowspan 和 colspan

Posted 2023-02-25

【中文标题】jQuery：通过搜索输入隐藏表格行，解决 td rowspan 和 colspan

【英文标题】：jQuery: hide table rows via search input, addressing td rowspan and colspan

【发布时间】：2018-05-31 18:21:13

【问题描述】：

我有一个包含多个行跨度和列跨度以及一个搜索输入的表格。输入应仅显示与第一列匹配的行并隐藏所有“子”行。

目前它只隐藏第一行而不是所有相关的子行。 如何隐藏所有行（子行数可变）？例如，如果我输入“foo”，则应该只出现“Foo”的行。

JSFiddle： https://jsfiddle.net/qsbw6Le4/

html：

<table id='myTable'>
<thead>
    <tr>
        <td colspan="1" rowspan="1">
            <input type="text" placeholder="searchme" class='table-search' data-table-search="myTable"></input>
        </td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">tablename</td>
        <td colspan="1" rowspan="1">header1</td>
        <td colspan="1" rowspan="1">header2</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td colspan="1" rowspan="2">Foo </td>
        <td>disagg1</td>
        <td>value</td>
        <td>value</td>
    </tr>
    <tr>
        <td>disagg2</td>
        <td>value</td>
        <td>value</td>
    </tr>
    <tr>
        <td colspan="1" rowspan="2">Bar</td>
        <td>disagg1</td>
        <td>value</td>
        <td>value</td>      
    </tr>
    <tr>
        <td>disagg2</td>
        <td>value</td>
        <td>value</td>      
    </tr>
</tbody>
</table>

javascript：

$(".table-search").on("keyup", function() 
    var value = $(this).val().toLowerCase(),
        tableattr = $(this).attr("data-table-search"),
        tablesearch = $('#'+tableattr).find('tbody tr')

    tablesearch.each(function() 
        $row = $(this);
        var id = $row.find("td:first").text().toLowerCase();
        if (id.indexOf(value) === -1) 
            $row.hide();
        
        else 
            $row.show();
             
    );
);

我尝试了描述的各种方法，例如这里无济于事：how to hide row with rowspan

【问题讨论】：

您是将数据导入表格还是手动设置每一行？

手动设置每一行@Keith

如：不动态生成表格

你想要达到什么目的？

例如，如果我输入“foo”，则应该只出现带有“Foo”的行，包括该行的所有“disaggs”行@whoami

【参考方案1】：

我在下面提供了一个解决方案，我会尽力解释它的各个方面。

修改您的keyup 事件以隐藏每一行。我们可以将循环中的逻辑简化为“我应该显示这一行吗？”。

大部分逻辑都围绕rowspan 属性，所以我们将通过$firstCell.attr('rowspan'); 来获取它。

棘手的一点。如果一行的行跨度为2，这意味着我们应该完全忽略下一行。如果它的行跨度为3，则意味着忽略下一个2 行。如果它的行跨度为n，则忽略下一个n-1 行。

如果我们遇到rowspan，我们可以将该数字存储在循环之外。这样做可以让我们确定顺序迭代是否是行跨度的“子代”。

如果 is 是行跨度的子项，我们将通过在循环中执行 return true; 来完全忽略该行。

如果是不是行跨度的子项，我们将检查该行中的搜索文本。

使用您的逻辑检查文本是否存在，我们可以显示该行是否包含该文本。然而，更进一步，我们还需要显示它的任何“子”行。请记住，一行的子行是下一个rowspan-1 行。

对于像(the :lt(n) selector) 这样的情况，jQuery 有一个方便的选择器，它选择“下一个n 元素”。

如果我们的行有一个行跨度，我们将要选择下一个 rowspan-1 元素，这可以使用 :lt(rowspan-1) 完成，将它们添加到当前行并显示它们。

// search in table
$(".table-search").on("keyup", function() 
  var value = $(this).val().toLowerCase(),
    tableattr = $(this).attr("data-table-search"),
    tablesearch = $('#' + tableattr).find('tbody tr');

  tablesearch.hide();                           //start with all rows hidden
  
  var previousRowspan = 1;                      //initiate our stored rowspan with the default of 1

  tablesearch.each(function() 
    var $row = $(this);
    var $firstCell = $row.find("td:first");
    var id = $firstCell.text().toLowerCase();
    var rowspan = $firstCell.attr('rowspan');   //get the row's rowspan

    
    if (previousRowspan > 1)                   //if this row is a child
        previousRowspan--;                      //decrease the rowspan
        return true;                            //don't check this row
    

    previousRowspan = +rowspan;                 //this row is not a child. update our rowspan.

    if (id.indexOf(value) > -1)                //if the text is found
      var additionalRows = previousRowspan-1;   //use our n-1 formula
      var $additionalRows = $row.nextAll(':lt(' + additionalRows + ')');  //select the next (n-1) rows
      $row.add($additionalRows).show();         //show this row, and the next (n-1) rows as well
    

  );

);

td 
  border: 1px solid #000;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
  <thead>
    <tr>
      <td colspan="1" rowspan="1">
        <input type="text" placeholder="searchme" class='table-search' data-table-search="myTable"></input>
      </td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">
        tablename
      </td>
      <td colspan="1" rowspan="1">
        header1
      </td>
      <td colspan="1" rowspan="1">
        header2
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">Foo </td>
      <td>disagg1</td>
      <td>value</td>
      <td>value</td>
    </tr>
    <tr>
      <td>disagg2</td>
      <td>value</td>
      <td>value</td>
    </tr>
    <tr>
      <td colspan="1" rowspan="2">Bar</td>
      <td>disagg1</td>
      <td>value</td>
      <td>value</td>
    </tr>
    <tr>
      <td>disagg2</td>
      <td>value</td>
      <td>value</td>
    </tr>
  </tbody>
</table>

【讨论】：

太棒了！虽然我不明白的一件事：如果你输入 disagg 它仍然显示行 - 有没有办法只搜索第一列（那些包含 Foo 和 Bar）？

嗯，我的疏忽。给我一分钟，我会改正的。

@toefftoefftoeff 已更新。