Applying multiple filtering on dynamic HTML table

Question

I am trying to apply multiple filtering using two input tags. The first one asks for the employee id and the second one asks for the employee name. The table is reading data from a .xlsx file.

Here is my code for filtering.

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

I heard that I should change the statements td:nth-child(1) and td:nth-child(2) to the index of the row rather than hardcoding it.

$(this).find("td").eq(myVariable).text().etchetera.. wheremyVariable is a zero-based integer. There is only two here, but you could loop. -- But do you actually look for advices or are you stucked on a specific bug? If the code works, and advices are wished, look for Code Review. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jun 13, 2018 at 3:06

Louys Patrice Bessette · Accepted Answer · 2018-06-15 14:43:09Z

You filtering function is working...

But the input event handler is assigned to a selector having a syntax error.

$("#empId","#empName") should be $("#empId,#empName").
Notice the quotes.

Then I suggest something more concise... Using .trim(). But your way, using .replace() was working.

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

Now about the nth-child() selector, because you did not post your HTML, I assumed that the intend was to target some specific td, like a specific column in the table. I this case, those selector are well used.

Collectives™ on Stack Overflow

Applying multiple filtering on dynamic HTML table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related