我可以过滤 table 行内容但忽略一个元素吗？

Question

我想根据每个中的内容过滤此 table 的行，中的内容除外。可能吗？

使用此脚本，如果我搜索“John”，我只想 return 包含 john@example.com 的行。我想忽略包含 "john".

的

我似乎无法让它工作。

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

<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>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@mail.com
        <div class='demolist'>john</div>
      </td>
    </tr>
</table>

Answer 1

也许还有另一种方法，但我使用函数 $(this).detach() 将带有 class“demolist”的 div 从 DOM 中删除，然后搜索没有达不到那里。但是要再次将它放在 DOM 中，你必须告诉它在哪里（通过 id 或 class），所以我在名为“append”的“demolist”之间创建了另一个 DIV 以使用该函数$(this).append(elem[index])。我使用 jQuery each 来列出 class 中的所有元素。像这样：

HTML

<input id="myInput" type="text" placeholder="Search..">
    
<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com<div class="append">    
      <div class='demolist'>Mary</div></div></td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@mail.com<div class="append">    
      <div class='demolist'>John</div></div> </td>
    </tr>
  </tbody>
</table>

JavaScript

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    var elem = $(".demolist");
    var ap = $(".append");
    elem.each(function(index, el) {
        $(this).detach();
    });
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); 
    });
    ap.each(function(index, el) {
        $(this).append(elem[index]);
    });
  });
});

您可以在此 fiddle 中查看工作示例：https://jsfiddle.net/cm3ns1wx/

我可以过滤 table 行内容但忽略一个元素吗？

Can I filter table row content but ignore one element?

html

jquery

row

filter

toggle