javascript - jQuery:通过搜索输入隐藏表行，解决td rowspan和colspan

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

当前，它仅隐藏第一行，但不隐藏所有相关子行。
如何隐藏所有行（子行数可变）？例如，如果我键入“ 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

最佳答案

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


修改您的keyup事件以隐藏每一行。我们可以将循环中的逻辑简化为“我应该显示此行吗？”。
大多数逻辑将围绕rowspan属性，因此我们将通过执行$firstCell.attr('rowspan');来获取该属性。
棘手的一点。如果某行的行距为2，则意味着我们应该完全忽略下一行。如果它的行距为3，则意味着忽略接下来的2行。如果它的行距为n，则忽略接下来的n-1行。

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

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

如果is不是行跨的子级，我们将检查该行是否包含搜索到的文本。
使用您的逻辑来检查文本是否存在，如果包含文本，我们可以显示该行。但是，将其进一步向前移动，我们还需要显示其任何“子级”行。请记住，下一排rowspan-1是行的子级。

jQuery对于这种(the :lt(n) selector)这样的情况有一个方便的选择器，它选择“下一个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>