Question

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

这是我的过滤代码。

<script>
    $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();
    });
</script>

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

Answer 1

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

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

$("#empId","#empName")应为$("#empId,#empName") 请注意引号。

然后我建议更简洁一些......使用.trim()。但是你的方式，使用.replace()正在发挥作用。

＆＃13;

$(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();

  });
});

＆＃13;

#tblData tr td{
  border:1px solid black;
  height:1em;
  width:14em;
}

＆＃13;

<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>

＆＃13;

关于nth-child()选择器的

现在，因为你没有发布你的HTML，我认为打算定位一些特定的td，就像一个特定的列一样表。在这种情况下，那些选择器很好用。

在动态html表

1 个答案: