SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Applying jQuery to Multiple Tables

    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.

    * * * * *

    Code:
    <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. #2
    SitePoint Addict ChiefLee's Avatar
    Join Date
    Apr 2009
    Location
    Lawrence KS
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Add your logo to Pocket Folders.

  3. #3
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChiefLee View Post
    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'))
    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. #4
    SitePoint Addict operator's Avatar
    Join Date
    Aug 2004
    Location
    Bangkok
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    id="myTable"
    with
    Code:
    class="myTable"
    on both of the tables you mentioned.

  5. #5
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by operator View Post
    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
    Code:
    id="myTable"
    with
    Code:
    class="myTable"
    on both of the tables you mentioned.
    Thanks, I've fixed it now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •