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>

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

Js code


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

         $('#form :checkbox').click(function() {
                var $this = $(this);
                // $this will contain a reference to the checkbox
                if ($':checked')) {
                } else {

Tagged with: , ,
Posted in Javascript, JQuery

Leave a Reply

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

You are commenting using your 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
  • 30,385 hits
%d bloggers like this: