jQuery dropdown table row filter

Earlier today I posted a simple example of hiding table rows based on the cell content. Bernhard posted a comment about dynamically adding a filter by list to the column heading. Well, here's my attempt. With a bit more work it could be expanded to work on all columns.

<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  // use a map to eliminate duplicates
  var assigneeMap = {};
  $('#tasks>tbody>tr>td:nth-child(3)').each(function(){
    assigneeMap[$(this).text()] = $(this).text();
  });
  
  var $tooltip = $('<div id="tooltip" />')
    .appendTo('body')
    .hide();
  
  $.each(assigneeMap, function(index, word){
    $('<div class="filter"/>')
      .text(word)
      .appendTo($tooltip)
      .click(function(event){
        $this = $(this);
        filterRows($this.text());
        $tooltip.hide();
      });
  });

  $('#tasks>thead>tr>th:nth-child(3)').hover(
    function(event) {
      //over
      positionTooltip.call(this, event);
    }, 
    function(event) {
      //out
    }
  );
  
  var positionTooltip = function(event){
    $tooltip.css({top:event.pageY+20, 
      left:event.pageX, 
      position:'absolute', 
      backgroundColor:'lightblue'
    }).show();
  };
  
  var filterRows = function(word){
    $('#tasks>tbody>tr')
      .show()
      .find('td:nth-child(3)')
      .not(':contains("'+word+'")')
      .parent()
      .hide();
  };
});
</script>
<table id="tasks">
  <thead>
    <tr>
      <th scope="col">Task</th>
      <th scope="col">Entered by</th>
      <th scope="col">Assigned to</th>
    </tr>
  <thead>
  <tbody>
    <tr>
      <td>Pick fantasy football team</td>
      <td>John</td>
      <td>John</td>
    </tr>
    <tr>
      <td>Buy lunch</td>
      <td>John</td>
      <td>John</td>
    </tr>
    <tr>
      <td>Write blog post</td>
      <td>John</td>
      <td>John</td>
    </tr>
    <tr>
      <td>Make tea</td>
      <td>John</td>
      <td>Simon</td>
    </tr>
    <tr>
      <td>Get biscuits for CFUG</td>
      <td>Andy</td>
      <td>Andy</td>
    </tr>
    <tr>
      <td>Add task filtering</td>
      <td>Simon</td>
      <td>John</td>
    </tr>
    <tr>
      <td>Style tasks table</td>
      <td>Simon</td>
      <td>Andy</td>
    </tr>
    <tr>
      <td>Schedule meeting</td>
      <td>Andy</td>
      <td>Simon</td>
    </tr>
  </tbody>
</table>

• Posted in:
• jQuery

2 comments

1. Hi,
   
   You may want to check your settings, your code looks like it was filtered through a ROT 13 generator, for instance:
   
   i
   ng<cfc<om/ptodn>en
   t e x t e nds=&quo<tt;dm>xuSniimto.nframewor<k./Tteds>tC
   a s e & q uot; out<ptudt>=&Jqouhont;false&q<uo/tt;d >h
   in t = "I test t<h/et rS>
   e c urityService<&tqru>ot
   
   and it gets worse from there.
   
   Comment by larry c lyons – November 30, 2009
2. @larry, I'm not getting that, but I'll dig a bit deeper and see if I can spot anything.
   
   Comment by John Whish – November 30, 2009