<script type="text/javascript" src=jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

      // over function color changes
      $(".tablestripe tr").mouseover(function() {
         $(this).addClass("over");
      })
      .mouseout(function() {
         $(this).removeClass("over");
      });

      // zebra striped table
      $(".tablestripe tr:even").addClass("second");

      // input field changes
       $("#zebraFilter").bind("keyup", function() {

         filterTxt = $(this).val();
         $("#zebraFilter").attr({value: filterTxt});

         // filter 
         $(".zebra tr").hide();
         $(".zebra tr.ttshow").show();
         $(".zebra tr").filter(":contains(" + filterTxt + ")").show();

         // striped table for filter results
         $(".zebra tr").removeClass("second");
         $(".zebra tr").filter(":contains(" + filterTxt + "):even").addClass("second");

     });

});
</script>

<style type="text/css">
table {
   border-collapse: collapse;
   width: 400px;
   margin: 20px;
   font-size: .9em;
}

th {
   background: #423;
   color: #fff;
   font-weight: bold;
   padding: 5px 10px;
   text-align: left;
}

td {
   padding: 5px 10px;
   border-bottom: 1px solid #a00;
}

tr.second td {
   background: #ecd;
}

tr.over td {
   background: #cab;
}
</style>