Hi Guys im trying to use Jquery to filter through a set of data
in a table by using links. I'm new to Jquery and followed a
tutorial but it isn't working.

They used divs instead of tables could that be why?

Can I even hide individual table rows?

HTML:

HTML Code:
<div id="main">
	<h2>schedule</h2>
<div id="subnav">

	<h5>sort by:</h5>
	
	<p class="class_trigger"><a href="#">by class type</a></p>
	<ul class="by_class">
		<li class="all"><a href="#" class="all">all</a></li>
		<li><a class="yoga" href="#">Yoga</a></li>
		<li><a class="pilates" href="#">Pilates</a></li>
		<li><a class="dance" href="#">Dance</a></li>
	</ul>
	
<!-- Show Hide / Class Script -->
		
		<script>
			<!--
			$(document).ready(function(){
				$('.by_class').hide();
				$('p.class_trigger').click(function(){
					$(this).toggleClass('active').next().slideToggle('slow');
					return false;
					});
				});
				-->
		</script>

<!-- End Show Hide / Class Script -->


	<p class="day_trigger"><a href="#">by day</a></p>
	<ul class="by_day">
		<li>Sunday</li>
		<li>Monday</li>
		<li>Tuesday</li>
		<li>Wednesday</li>
		<li>Thursday</li>
		<li>Friday</li>
		<li>Saturday</li>
	</ul>

<!-- Show Hide / Day Script -->

		<script>
			<!--
			$(document).ready(function(){
				$('.by_day').hide();
				$('p.day_trigger').click(function(){
					$(this).toggleClass('active').next().slideToggle('slow');
					return false;
					});
				});
				-->
		</script>
		
<!-- End Show Hide / Day Script -->

	<p><a href="#">view all</a></p>


</div><!--SubNav-->

	<!--Jquery Sort-->
<script>
<!--
$(document).ready(function() {
	$('.by_class li a').click(function(){
	var selectedClass = $(this).attr('class');
	
	$('.by_class li'.removeClass('active');
	$(this).parent().addClass('active');
	
	 if(selectedClass == 'all') {
      $('.classes_all').children('tr').show();
    }
	else {
	$('.classes_all').children('tr:not(.' + selectedClass +')' ).hide();
	$('.classes_all').children('tr.' + selectedClass).show();
	}
	return false;
	});
});
-->
</script>

	<table class="classes_all">  
  <thead>  
    <tr>  
      <th>Class Type</th>  
      <th>Day</th>  
      <th>Time</th>
      <th>Studio</th>
    </tr>  
  </thead>  
  <tbody>
  
<!-- Sunday Classes -->  
    <tr class="item yoga">  
      <td>Yoga level 1</td>  
      <td>Sunday</td>
      <td>9:00-10:15 am</td>
      <td>Studio A</td>
    </tr>  
    
    <tr class="item pilates">  
      <td>Pilates Open</td>  
      <td>Sunday</td>
      <td>9:15-10:30 am</td>
      <td>Studio B</td>
    </tr>  
    
     <tr class="item yoga">  
      <td>Yoga level 3</td>  
      <td>Sunday</td>
      <td>2:00-1:30 pm</td>
      <td>Studio B</td>
    </tr>
    
    <!-- Monday Classes -->  
    <tr class="item yoga">  
      <td>Yoga Open</td>  
      <td>Monday</td>
      <td>7:00-8:15 am</td>
      <td>Studio A</td>
    </tr>  
    
    <tr class="item pilates">  
      <td>Pilates Open</td>  
      <td>Monday</td>
      <td>8:00-9:15 am</td>
      <td>Studio B</td>
    </tr>  .....etc.
CSS:

HTML Code:
div#subnav{
	width:80px;
	float:left;
}

div#subnav h5{
	font-size:16px;
	margin-bottom:6px;
	margin-top:0;
}

div#subnav p{
	font-family: 'Humanist521Roman', arial, sans-serif;
	margin-bottom:0;
	text-indent:4px;
}

div#subnav ul{
	list-style:none;
	margin-bottom:10px;
}

div#subnav li{
	font-size:16px;
	text-transform:lowercase;
	text-indent:12px;
}

.classes_all{
	position:absolute;
	left:113px;
	top:57px !important;
	text-transform:lowercase;
}

thead{
	font-family: 'Humanist521Light', arial, sans-serif;
	font-size:16px;
	text-align:left;
	margin-bottom:4px;
}

tbody{
	font-family: 'Humanist521Light', arial, sans-serif;
	font-size:16px;
	text-align:left;
	margin-bottom:2px;
}

th{
	padding-left:20px;
}

td{
	padding-left:20px;
}
	

.day_trigger{
	width:90px;
}

.class_trigger{
	width:90px;
}
Can anyone help me?