Filter Html Table Row in Jquery


Today trying to filter Html table and learning to create classes in javascript. It may help to someone if looking for the same:

You can find working example here:

Html Code


<div id="form">
    <input type="checkbox" value="x1" name="ch">x1</input>
    <input type="checkbox" value="x2" name="ch">x2</input>
    <input type="checkbox" value="x3" name="ch">x3</input>
<div>

<table id="table">
  <tr>
      <td col="name">x1</td>
      <td col="price">20</td>
  </tr>
 <tr>
      <td col="name">x2</td>
      <td col="price">30</td>
  </tr>
  <tr>
      <td col="name">x3</td>
      <td col="price">40</td>
  </tr>
</table>

Js code


<script>

   var cls ={
                categories:[],
                prices:[],
                filterByColName : function(colName)
                {
                     self= this;
                      $("#table td[col=" + colName + "]").filter(function(item) {
                             if(self.categories.length > 0)
                             {
                                 if(self.categories.indexOf($(this).text()) !== -1)
                                         $(this).parent().show();
                                 else
                                         $(this).parent().hide();
                              }
                              else
                                  $(this).parent().show();
                        });
                  }
           }

         $('#form :checkbox').click(function() {
                var $this = $(this);
                // $this will contain a reference to the checkbox
                if ($this.is(':checked')) {
                      cls.categories.push($(this).val());
                } else {
                     cls.categories.splice($this.val(),1);
                }
               cls.filterByColName("name");
        });

</script>
Advertisements
Tagged with: , ,
Posted in Javascript, JQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Top Rated

Error: Please make sure the Twitter account is public.

Blog Stats
  • 29,933 hits
%d bloggers like this: