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

Question

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

目前它只隐藏第一行而不是所有相关的子行。 如何隐藏所有行(子行数可变)？例如，如果我键入“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

Answer 1

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

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

2. 大部分逻辑将围绕 rowspan 属性，因此我们将通过执行 $firstCell.attr('rowspan'); 获取它。

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

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

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

   如果 不是 rowspan 的子项，我们将检查该行是否有搜索到的文本。

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

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

   如果我们的行有一个 rowspan，我们将要选择下一个 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>