为什么jQuery过滤器功能无法通过表主体和行工作？

问题描述 投票：0回答：1

enter image description here我正在尝试搜索由JS和jQuery制成的通讯录，并尝试了大多数可用的模式选项以通过搜索的ready（）过滤tbody和tr，但无法正常工作，请您看看并让我知道我要去哪里了。下面是我的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)
    });
  });
});
javascript jquery html dom filter
1个回答
0
投票
您的代码中看到的一些问题。正如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()将失败，因为它无法在tr标签中找到tbody。
请更正以上并检查。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.