时间戳

首页 > 解决方案 > 对动态 HTML 表应用多重过滤

javascript - 对动态 HTML 表应用多重过滤

问题描述

我正在尝试使用两个输入标签应用多重过滤。第一个要求提供员工 ID，第二个要求提供员工姓名。.xlsx该表正在从文件中读取数据。

这是我的过滤代码。

$rows = $("#tblData tr");
$("#empId", "#empName").on("input", function () {
    var val1 = $.trim($('#empId').val()).replace(/ +/g, ' ').toLowerCase();
    var val2 = $.trim($('#empName').val()).replace(/ +/g, ' ').toLowerCase();
    $rows.show().filter(function () {
        var text1 = $(this).find("td:nth-child(1)").text().replace(/\s+/g, ' ').toLowerCase();
        var text2 = $(this).find("td:nth-child(2)").text().replace(/\s+/g, ' ').toLowerCase();
        return !~text1.indexOf(val1) || !~text2.indexOf(val2);
    }).hide();
});

我听说我应该更改语句td:nth-child(1)和td:nth-child(2)行的索引，而不是硬编码它。

标签： javascriptjqueryhtml

解决方案

您的过滤功能正在工作...

但是input事件处理程序被分配给具有语法错误的选择器。

$("#empId","#empName")应该是$("#empId,#empName")。
注意引号。

然后我建议更简洁的东西......使用.trim(). 但是你的方式，使用.replace()是有效的。

$(document).ready(function(){

  $rows=$("#tblData tr");

  $("#empId,#empName").on("input",function(){
    var val1 = $('#empId').val().trim().toLowerCase();
    var val2 = $('#empName').val().trim().toLowerCase();

    console.log(val1 +" | "+ val2);

    $rows.show().filter(function(){
      var text1=$(this).find("td:nth-child(1)").text().trim().toLowerCase();
      var text2=$(this).find("td:nth-child(2)").text().trim().toLowerCase();
      return !~text1.indexOf(val1)||!~text2.indexOf(val2);
    }).hide();

  });
});
#tblData tr td{
  border:1px solid black;
  height:1em;
  width:14em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ID: <input type="txt" id="empId"><br>
Name: <input type="txt" id="empName"><br>
<br>
<table id="tblData">
  <tr>
    <td>0001</td><td>John Doe</td><td>President</td>
  </tr>
  <tr>
    <td>0002</td><td>Jane Doe</td><td>Secretary</td>
  </tr>
  <tr>
    <td>0157</td><td>Ali Gator</td><td>Accountant</td>
  <tr>
</table>

现在关于nth-child()选择器，因为你没有发布你的 HTML，我假设打算针对一些特定td的，比如表中的特定列。在这种情况下，那些选择器很好用。

推荐阅读