CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
KyelJmD
KyelJmD

Reputation: 4732

Querying a table in Jquery

I have encountered this code

$("#search").keyup(function(){
  var val = $.trim(this.value).toLowerCase();
   $("table > tbody > tr:gt(0) ").hide();

   if(val.length){
     $("table > tbody > tr:gt(0) > td").filter(function(){
       return this.innerHTML.toLowerCase().indexOf(val) >=0;
     }).parent().show();
   } else $("table > tbody > tr:gt(0)").show();
});

For Querying a a table in jQuery. here's the HTML markup

<p>
  <input id = "search" type = "text">
</p>
<table id ="accounts">
  <tr>
    <th>Username</th>
    <th>Password</th>
  </tr>         
  <tr>
    <td>Metasm</td>
    <td>password1992</td>
  </tr>
  <tr>
    <td>superadmin</td>
    <td>adminpassword</td>
  </tr>         
  <tr>
    td>skyrocketeer</td>
    <td>thejetsons</td>
  </tr>
</table>

Basically it works. but the I am very confused with regards to the jQuery code.

My Question: in this part of code

$("table > tbody > tr:gt(0) > td").filter(function(){
  return this.innerHTML.toLowerCase().indexOf(val) >=0;
}).parent().show();

What does this part specifically do? and what does it return?

Upvotes: 0

Views: 304

Answers (3)

Lix
Lix

Reputation: 47956

  • $("table > tbody > tr:gt(0) > td") - This lines of code states that you want all <td> elements within a <table> element that are in a <tbody> element, who's <tr> element's index is greater than 0 (ie - skip the first row. gt() is simple Greater Than). The > selector states that we only want elements in the first level of children - we don't want to drill down further than the first set of child elements.

  • The .filter() function will reduce the set of matched elements to those that match the selector or pass the function's test.

  • The conditional statement here is looking for a certain index of a search string val, within the innerHTML of each element.
    this.innerHTML.toLowerCase().indexOf(val) >=0

So what this is saying (remembering that we are iterating over all the elements we found from our first selector) is that we are looking for an occurance of the string val within the innerHTML of the element. The innerHTML is also being passed through the toLowerCase() function, who's name suggests is function - converts all characters to their lowercase form.

Phew...Now after all this we are left with a certain list of elements. Elements that met all of our specifications above. For each of these elements, the code will locate their parent (remember we are talking about <td> elements, so their parents should be <tr>) with the .parent() function and display them on screen with the .show() function.

For the first selector - $("table > tbody > tr:gt(0) > td"), I find sometimes its easier to read it backwards (in your mind) to understand the hierarchy...

Return the -

  1. I'm looking for <td> elements,
  2. that are inside <tr> elements (but not the first one),
  3. that are inside a <tbody> element
  4. that all reside within a <table> element.

Now for some sample input and output:

  • Given the value of val is "jet", the function would display the last <tr> - the one with the string - thejetsons.
  • Given the value of val is "password", the function would display the two <tr> elements in the middle. The ones that contain "password1992" and "adminpassword".

Upvotes: 3

Danil Speransky
Danil Speransky

Reputation: 30453

This code select all td elements in all tr elements except first one, then we execute the function for each element as context, if for element the function return false, then it is excluded from jquery 'array', then for all filtered elements we get tr elements in which they are and show them. Into the function we get inner text and search it in search query.

Upvotes: 0

Nhu Trinh
Nhu Trinh

Reputation: 13956

$("table > tbody > tr:gt(0) > td") will select all td inside tr:gt(0)... this is a basic jquery selector.

With those td selected, apply a filter based on returned value of the function, if return true, the td will be select.

Then your function: return this.innerHTML.toLowerCase().indexOf(val) >=0 means if the td contains a string (val) will return true, otherwise.

All of this equal to

$("table > tbody > tr:gt(0) > td:contains('"+val+"')").parent().show();

Upvotes: 0

Related Questions