Page 2 of 2 FirstFirst 12
Results 11 to 13 of 13

Thread: jQuery help on first plugin

  1. #11
    Ryan's Avatar
    Ryan is offline WordPress Legend
    Join Date
    Jan 2009
    Location
    New Zealand
    Posts
    2,797

    Default

    On re-reading my post I see how it may have come across as grumpy. That's wasn't how I meant it to come across.

  2. #12
    Otto's Avatar
    Otto is offline On The Rocks
    Join Date
    Apr 2009
    Location
    Memphis, TN
    Posts
    862

    Default

    Example code of how to do this sort of thing in a single table.

    HTML Code:
     <table border=1>
    <tr id="row1">
    <td class="day" rowspan=3>
    Monday
    </td>
    <td>entry 1</td>
    </tr>
    <tr id="row2">
    <td>entry 2</td>
    </tr>
    <tr id="row3">
    <td>entry 3</td>
    </tr>
    <tr id="row4">
    <td class="day" rowspan=2>
    Sat
    </td>
    <td>entry 4</td>
    </tr>
    <tr id="row5">
    <td>entry 5</td>
    </tr>
    </table>
    
    <button onclick="dostuff();">Do it</button>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script>
    function dostuff() {
    $('#row1').hide();
    var rows = $('#row1 .day').attr('rowSpan');
    $('#row1 .day').attr('rowspan', rows-1);
    $('#row2').prepend($('#row1 .day'));
    }
    </script>

    The trick is to do three things:
    1. Hide the row.
    2. Grab the day TD and reduce its rowspan by the right amound.
    3. Move it by prepending it to whatever the first row that should be displayed is.

    You're on your own for making this more generic, but that's the basic algorithm.

  3. #13
    Mild Fuzz is offline Here For The Peanuts
    Join Date
    Feb 2010
    Posts
    106

    Default

    This is the code that I use to generate the output of the table.

    There is a gap in there where I am thinking of working out a way of identifying which days are without certain category types, and thus should be removed when other category types are selected.

    PHP Code:
    function mf_timetable_display(){
        
    //Creates output display for timetable - used in shortcode.
        
        
    global $wpdb;
        
        
    $table_name $wpdb->prefix "mf_timetable";
        
        if(!isset(
    $_GET['category']) OR $_GET['category']=="all"){
            
    $query="SELECT * FROM " $table_name;
        } else {
            
    $query="SELECT * FROM " $table_name " WHERE category= '" $_GET['category']."'";
        };
        
        
    $results $wpdb->get_results($query);
        

        
    $mf_table_output .="<table>";
        
    //table start
        //$mf_table_output .="<table><thead><tr><th>Day</th><th>Class Name</th><th>Location</th><th>Start Time</th><th>End Time</th><th>Teacher</th><th>Cost</th><th>Category</th></tr></thead>";//Table Headers

        
    $current_day false;
        
        
    $no_class_results=$results;//duplicate SQL results for second foreach loop.
        
        
    foreach($no_class_results as $no_class_results){
            
    //************--TO DO--*************
            //Algorythm for determining if any days are without a class type.
            //This information is to be passed to a class name on the rows of those days
            //Then the jQuery ammended to hide rows where necessary.
            //**********************************
            
            
        
    }
        
        
        foreach (
    $results as $results){
        
            global 
    $current_day;
            
        
        if (
    $current_day != $results->day){
            
    $day_output $results->day;
            
    $sub_table_start "<td><table><tr class=".$results->category.">";
            
    $sub_table_end "";
            if (
    $current_day != false){
                
    $sub_table_end "</table></td></tr>";
            }
        } else {
                
    $sub_table_start "";
                
    $day_output "";
                
    $sub_table_end "";
        }
        
        
    $mf_table_output .= $sub_table_end;
        
        
    $mf_table_output .=    "<tr>";
        
        if (
    $day_output!=""){
        
    $mf_table_output .= "<tr><td>".$day_output."</td>";
        } else {
            
    $mf_table_output .=    "<tr class=".$results->category.">";
        }
         


        if (
    $current_day != $results->day){
        
    $current_day $results->day;
        
        }
        
        
    $mf_table_output .=    $sub_table_start."<td>".$results->class;
        
    $mf_table_output .=    "</td><td>".$results->location;
        
    $mf_table_output .=    "</td><td>".$results->start;
        
    $mf_table_output .=    "</td><td>".$results->end;
        
    $mf_table_output .=    "</td><td>".$results->teacher;
        
    $mf_table_output .=    "</td><td>".$results->cost;
        
    $mf_table_output .=    "</td><td>".$results->category;
        
    $mf_table_output .=    "</td></tr>";
        };
        
        
    $mf_table_output .= "</table></td></tr></table>";
        
    $mf_table_output .= "<br />";
        
    $mf_table_output .= "<a class=\"test\" href=#>Test</a>";

        
    $mf_table_output .= "<form action=\"";
        
    $mf_table_output .= mf_curPageURL();
        
    $mf_table_output .= "\" method=\"GET\">";
        
    $mf_table_output .= "<select name=\"category\">";
        
        
        
        if (isset(
    $_GET['category'])){
            if (
    $_GET['category']=="all") {
                 
    $mf_table_output .= "<option selected value=\"all\">All</option>";
            } else {
                
    $mf_table_output .= "<option value=\"all\">All</option>";
            };
            if (
    $_GET['category']=="ballet") {
                 
    $mf_table_output .= "<option selected value=\"ballet\">Ballet</option>";
            } else {
                
    $mf_table_output .= "<option value=\"ballet\">Ballet</option>";
            };
            if (
    $_GET['category']=="modern") {
                 
    $mf_table_output .= "<option selected value=\"modern\">Modern</option>";
            } else {
                
    $mf_table_output .= "<option value=\"modern\">Modern</option>";
            };
            if (
    $_GET['category']=="tap") {
                 
    $mf_table_output .= "<option selected value=\"tap\">Tap</option>";
            } else {
                
    $mf_table_output .= "<option value=\"tap\">Tap</option>";
            };
            if (
    $_GET['category']=="adult") {
                 
    $mf_table_output .= "<option selected value=\"adult\">Adult</option>";
            } else {
                
    $mf_table_output .= "<option value=\"adult\">Adult</option>";
            }
        } else{
            
    $mf_table_output .= "<option value=\"all\">All</option>";
            
    $mf_table_output .= "<option value=\"ballet\">Ballet</option>";
            
    $mf_table_output .= "<option value=\"modern\">Modern</option>";
            
    $mf_table_output .= "<option value=\"tap\">Tap</option>";
            
    $mf_table_output .= "<option value=\"adult\">Adult</option>";
        }
        
        

        
        
        
    $mf_table_output .= "<input class=\"mf_timetable_ui\" type=\"submit\" value=\"Filter Results\"/>    </form>";
        
        echo 
    $mf_table_output;
        
    //print_r($test_val);
        



Page 2 of 2 FirstFirst 12

Posting Permissions

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