javascript - 在 jQuery 中显示最接近的 TR(数据头)

Question

这是我的 fiddle :https://jsfiddle.net/qpouvped/2/

我想要做的是显示带有搜索名称相应字母的标题。但我没有成功!

如果您看到代码并查找“Nanana”，我想显示此行以及“Nanana”所属的灰色标题 C。

谁能帮我解决这个问题吗？

我的 HTML:

<div class="row">
  <div class="col-12 col-lg-4">
    <label for="nome">Nome</label>
    <input type="text" class="form-control filter-nome" value="">
  </div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
    <thead>
        <tr>
            <th>Nº</th>
            <th>Nome</th>
            <th>Nº PROTOCOLO</th>
        </tr>
    </thead>
    <tbody>
        <tr class="subtitulo">
            <td colspan="3" class="cab_interno">A</td>
        </tr>
        <tr>
            <td >137418</td>
            <td >Nonono Nonono Nonono</td>
            <td >11225566</td>
        </tr>
        <tr class="subtitulo">
            <td colspan="3" class="cab_interno">B</td>
        </tr>
        <tr>
            <td >122222</td>
            <td >Nonono Nonono Nonono</td>
            <td >11225566</td>
        </tr>
        <tr class="subtitulo">
            <td colspan="3" class="cab_interno">C</td>
        </tr>
        <tr>
            <td >122222</td>
            <td >Nonono Nonono Nonono</td>
            <td >11225566</td>
        </tr>
         <tr>
            <td >133</td>
            <td >Nanana Nonono Nonono</td>
            <td >11225566</td>
        </tr>
    </tbody>
</table>

我的 jQuery:

$(".filter-nome").keyup(function(){
        var value = $(this).val();
        $(".lista-certidoes tbody tr").each(function(index){
            $row = $(this);
            var id = $row.find("td:nth-child(2)").text();
            if (id.indexOf(value) != 0) {
                $(this).hide();
            }   else {
                $(this).show();
                //$(this).parent('tbody').next('td.cab_interno').show();
            }
        });
    });

Answer 1

字母标题是最接近的 tr 的前一个同级标题，因此您需要使用 .prevAll()。这些按距当前行的距离顺序返回，因此第一个将是该组的标题。

您也不应该在 .each() 循环中处理标题行。只需先隐藏所有内容，然后显示匹配的数据行及其标题。

$(".filter-nome").keyup(function() {
  var value = $(this).val();
  if (value == "") {
    // Show everything when filter is empty
    $(".lista-certidoes tbody tr").show();
    return;
  }
  $(".lista-certidoes tbody tr").hide();
  $(".lista-certidoes tbody tr:not(.subtitulo)").each(function(index) {
    $row = $(this);
    var id = $row.find("td:nth-child(2)").text();
    if (id.indexOf(value) == 0) {
      $row.show();
      $row.closest("tr").prevAll(".subtitulo").first().show();
    }
  });
});

.lista-certidoes {
  .cab_interno {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 8px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-12 col-lg-4">
    <label for="nome">Nome</label>
    <input type="text" class="form-control filter-nome" value="">
  </div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
  <thead>
    <tr>
      <th>Nº</th>
      <th>Nome</th>
      <th>Nº PROTOCOLO</th>
    </tr>
  </thead>
  <tbody>
    <tr class="subtitulo">
      <td colspan="3" class="cab_interno">A</td>
    </tr>
    <tr>
      <td>137418</td>
      <td>Nonono Nonono Nonono</td>
      <td>11225566</td>
    </tr>
    <tr class="subtitulo">
      <td colspan="3" class="cab_interno">B</td>
    </tr>
    <tr>
      <td>122222</td>
      <td>Nonono Nonono Nonono</td>
      <td>11225566</td>
    </tr>
    <tr class="subtitulo">
      <td colspan="3" class="cab_interno">C</td>
    </tr>
    <tr>
      <td>122222</td>
      <td>Nonono Nonono Nonono</td>
      <td>11225566</td>
    </tr>
    <tr>
      <td>133</td>
      <td>Nanana Nonono Nonono</td>
      <td>11225566</td>
    </tr>
  </tbody>
</table>