Applying jQuery to Multiple Tables

JavaScript
1

I’m using jQuery’s tablesorter.js and Zebra widget to create tables with sortable columns and alternate row colors, where a table is given the ID myTable. It works, but only for one table per page.

If I add a second table and give it the same ID, it doesn’t work.

Does anyone know how to enable multiple tables? Thanks.


<script src="http://Geobop/2B/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="http://Geobop/2B/js/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function()
  {
  $("#myTable").tablesorter({ widgets: ['zebra']} );

$("#triggerMS").click(function(){
 $("#menuMS").show();
 return false;
});
$("#menuMS").click( function(){
 $("#menuMS").hide();
 return true;
});

$("#triggerReg").click(function(){
 $("#menuReg").show();
 return false;
});
$("#menuReg").click( function(){
 $("#menuReg").hide();
 return true;
});

$("#triggerKids").click(function(){
 $("#menuKids").show();
 return false;
});
$("#menuKids").click( function(){
 $("#menuKids").hide();
 return true;
});

$("#triggerLinks").click(function(){
 $("#menuLinks").show();
 return false;
});
$("#menuLinks").click( function(){
 $("#menuLinks").hide();
 return true;
});

$("#triggerBooks").click(function(){
 $("#menuBooks").show();
 return false;
});
$("#menuBooks").click( function(){
 $("#menuBooks").hide();
 return true;
});

  }
 );
</script>
2

HTML doesn’t allow you to have multiple elements with the same id, so you’ll have to change your jQuery selectors to use CSS classes instead of ids (using dot-syntax instead of the pound sign, like $(‘.sortable-table’)) Alternatively, you could give different ids to the tables and loop through the ids and bind the jQuery actions that way.

3

That’s a good idea. The weird thing is, when I opened my JS files, I couldn’t even find any reference to “myTable.” But I’ll have another look. Thanks.

4

You have a reference to “#myTable” on the sixth line down in your quote above. Replace the “#” with a “.”

Then, in your html file, replace

id="myTable"

with

class="myTable"

on both of the tables you mentioned.

5

Thanks, I’ve fixed it now.