Question

大家好！关于我的问题有人可以帮我吗？过滤器代码来自w3school。我的问题是在textbox中输入确切的名称或年龄。没有行显示。除了我的thead以外的所有行均已消失。我想删除并显示表格行捍卫我在文本框中输入的姓名或年龄。我正在使用jQuery。

<!DOCTYPE html>
<html>

<head>
  <script src="jquery-3.3.1.js"></script>
  <script>
    $(document).ready(function(){
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
      $("#tblBody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</head>

<body>
  <input id="myInput" type="text" placeholder="Search..">
<br><br>
  <button id="btnAdd">New</button>
  <table id="tblData" border = "1px">
    <thead>
      <tr>
        <th>ID</th>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Age</th>
        <th>Action</th>
      </tr> 
    </thead>
    <tbody id="tblBody">
    </tbody>
  </table>
  <script>
    var id = 1;
    $(function() {
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
      $("#btnAdd").bind("click", Add);
    });

    function Add() {
      $("#tblBody").append(
        "<tr>" +
        "<td>" + id + "</td>" + 
        "<td><input type='text'></td>" +
        "<td><input type='text'></td>" +
        "<td><input type='text'></td>" +
        "<td><button class='btnSave'>Save</button><button class='btnEdit'>Edit</button><button class='btnDelete'>Delete</button></td>" +
        "</tr>");

      $('#r2').hide();

      $('#btnAdd').attr('disabled','disabled');
      $('.btnEdit').attr('disabled','disabled');
      $('.btnDelete').attr('disabled','disabled');

      $(".btnSave").bind("click", Save);
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
      id++;
    };

    function Save() {

      var par = $(this).parent().parent(); 
      var tdFirstName = par.children("td:nth-child(2)");
      var tdLastName = par.children("td:nth-child(3)");
      var tdAge = par.children("td:nth-child(4)");
      var tdButtons = par.children("td:nth-child(5)");

      tdFirstName.html(tdFirstName.children("input[type=text]").val());
      tdLastName.html(tdLastName.children("input[type=text]").val());
      tdAge.html(tdAge.children("input[type=text]").val());

      tdFirstName.html("<input type='text' id='txtName' value='" + tdFirstName.html() + "'/>");
      tdLastName.html("<input type='text' id='txtPhone' value='" + tdLastName.html() + "'/>");
      tdAge.html("<input type='text' id='txtEmail' value='" + tdAge.html() + "'/>");

        $('#btnAdd').removeAttr('disabled');
        $('.btnSave').attr('disabled','disabled');
        $('.btnEdit').removeAttr('disabled');
        $('.btnDelete').removeAttr('disabled');

        tdFirstName.find('input').attr('disabled', 'true');
          tdLastName.find('input').attr('disabled', 'true');
          tdAge.find('input').attr('disabled', 'true');

      //$(".btnSave").bind("click", Save);
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);

    };

    function Edit() {
      var par = $(this).parent().parent(); 
      var tdFirstName = par.children("td:nth-child(2)");
      var tdLastName = par.children("td:nth-child(3)");
      var tdAge = par.children("td:nth-child(4)");
      var tdButtons = par.children("td:nth-child(5)");

      tdFirstName.val("<input type='text' id='txtName' value='" + tdFirstName.html() + "'/>");
      tdLastName.val("<input type='text' id='txtPhone' value='" + tdLastName.html() + "'/>");
      tdAge.val("<input type='text' id='txtEmail' value='" + tdAge.html() + "'/>");

      $('#btnAdd').attr('disabled','disabled');
      $('.btnEdit').attr('disabled','disabled');
      $('.btnSave').removeAttr('disabled');
      $('.btnDelete').removeAttr('disabled');

      $(".btnSave").bind("click", Save);
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);

      tdFirstName.find('input').removeAttr('disabled');
      tdLastName.find('input').removeAttr('disabled');
      tdAge.find('input').removeAttr('disabled');
    };

    function Delete() {
      var par = $(this).parent().parent(); 
      par.remove();
      id = 1;
    };

  </script>
</body>
</html>

Answer 1

尝试这个

而不是#tblBody tr在要搜索的地方使用#tblBody tr input，并使用use val（）instead of text（）`

$("#tblBody tr input").filter(function() {
    $(this).toggle($(this).val().toLowerCase().indexOf(value) > -1)
});

///如果找不到匹配项，则删除行尝试此代码

if($(this).val().toLowerCase().indexOf(value) > -1){
     $(this).closest('tr').show();
     // $(this).toggle($(this).val().toLowerCase().indexOf(value) > -1)
}else{
     $(this).closest('tr').hide();
}

如何使用jQuery过滤表行

1 个答案: