为什么 jQuery 过滤器功能不能通过表体和行工作？答案

【问题标题】：why jQuery filter function not working through table body & row?为什么 jQuery 过滤器功能不能通过表体和行工作？
【发布时间】：2020-03-30 11:36:09
【问题描述】：

我正在尝试搜索一个用 JS 和 jQuery 制作的通讯录，并尝试了大多数可用的模式选项来过滤 tbody 和 tr 通过下面的搜索 ready() 但它不起作用，请你看看让我知道我哪里出错了。下面是我的 html 和 JS 代码，我在 repl.it 工作谢谢。

HTML

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>repl.it</title>
        <link href="style.css" rel="stylesheet" type="text/css">
      </head>
      <body>
        <div class="container">
        <header>
          <h1>Address Book</h1>
          <hr />
        </header>
        <table id='table1' class="table">
          <input id="myInput" type="text" placeholder="Search..">
          <br><br>
          <thead> 
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Phone</th>
              <th>Address</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
            <tr>
              <td>
                <input id='firstName' class='form-control' type="text" placeholder ='Name'>
              </td>
              <td>
                <input id='lastName' class='form-control' type="text" placeholder ='Surname'>
              </td>
              <td>
                <input id='phone' class='form-control' type="text" placeholder ='Contact Number'>
              </td>
              <td>
                <input id='address' class='form-control' type="text" placeholder ='Full Postal Address'>
              </td> 
              <td>
                <div class="text-center">
                  <button id='add' class='btn btn-block' >Add</button>
                </div>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>  

      <script
      src="https://code.jquery.com/jquery-3.2.1.js"
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
      crossorigin="anonymous"></script>
      <script src="script.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      </body>
    </html>

JS 代码

var adBook = (function () {
  // default fields for understanding
  var pplDetails = [{
    firstName: 'Sam',
    lastName: 'Smith',
    phone: '004477995544',
    address: '33 jump st, London'
  }];

  //variables declaration
  var table = $('#table1');
  var $tbody = table.find('tbody');
  var $firstName = table.find('#firstName');
  var $lastName = table.find('#lastName');
  var $phone = table.find('#phone');
  var $address = table.find('#address');
  var $button = table.find('#add');
  var $btnRemove = table.find('#remove');
  var $input = table.find(".edit");


  //events calls
  $button.on('click', adPerson);
  table.on('click', '#remove', delPerson);
  console.log($input);
  build();



  //function to create new table data
  function build() {
    $tbody.html('');
    var length = pplDetails.length;
    for (var i = 0; i < length; i++) {
      table.prepend('<tr><td><input type="text" value="' + pplDetails[i].firstName + '" ></td> <td><input type="text" value="' + pplDetails[i].lastName + '" ></td> <td><input type="text" value="' + pplDetails[i].phone + '" ></td> <td><input type="text" value="' + pplDetails[i].address + '" ></td> <td> <button id="remove" class="btn btn-block">Del</button></td></tr>');
    }
  }

  //function to add persons details
  function adPerson() {
    var data = {
      firstName: $firstName.val(),
      lastName: $lastName.val(),
      phone: $phone.val(),
      address: $address.val()
    };
    pplDetails.push(data);
    $firstName.val('');
    $lastName.val('');
    $phone.val('');
    build()
  }

  //function to delete details
  function delPerson(event) {
    var element = event.target.closest('tr');
    var i = table.find('td').index(element);
    pplDetails.splice(i, 1);
    build();
  }

  return {
    adPerson: adPerson,
    delPerson: delPerson
  };



})();


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

【问题讨论】：

jQuery 过滤功能在哪里不起作用？预期的行为是什么？请仅在出现问题的地方添加小演示，而不是完整的应用代码。
您包含两个 jquery 库
@palaѕн 在我搜索时向表中添加了一些记录后发生了什么，请看图片，而不是它应该过滤并显示搜索匹配结果。
嘿@RoyBogado 即使我取出一个 jquery 库，这仍然没有区别

标签： javascript jquery html dom filter

【解决方案1】：

在您的代码中发现了一些问题。 palasH 指出的第一件事是 HTML 中有两个 jquery 包含，如下所示。

<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>

和

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

您的tbody 标签为空，如下所示。

  <tbody>
  </tbody>

整个表格内容——即tr 行在tfoot 标记内。因此$('tbody tr').filter() 将失败，因为它在tbody 标签中找不到tr。

请更正以上内容并检查。

【讨论】：

嘿@die-Bugger，我已经在 cmets 中提到，即使您关闭 jquery 2nd lib 也不会产生任何影响。 2- jQuery 正在动态地制作 tbody 的表格内容。
你不会使用$tbody.html() 而不是table.prepend 吗？这样，您的 tbody 会正确填充，以便搜索正确地选择来自 'tbody tr' 的数据