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

Question

我正在尝试使用两个输入标签应用多重过滤。 第一个询问员工 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) 更改为行的索引，而不是对其进行硬编码。

Answer 1

您的过滤功能正在运行...

但是 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，例如表中的特定列。在这种情况下，这些选择器得到了很好的使用。