Error In Tables Display And Alternate Row Colouring Not Applying to Tables After The First Table

Question

Please I need your help with the display of a page in my App. The student profile is gathering relevant data for the courses a student have taken over 10 semesters. The queries are working fine, but the display is not displaying as i want it to be. Also the JavaScript alternate row colouring is not applying to all the remaining tables after the first table. I'm looking to have something of this nature in the page display.

                 RAIN SEMESTERS
     Year1  Year2  Year3 Year4   Year5       

          HARMATTARN SEMESTERS 
 Year1   Year2   Year3  Year4   Year5 .

This is an example of the PHP that is generating the tables, the remaining 9 tables are identical with varying Years ( 1-5 ) and Semesters: Rain/Harmattan

         echo "<div id=\"contentRight\">" ;
             echo "<span class=\"header\">";
  echo "<p><b>Matric Number: $matric_       no</b></p>";
       echo "<p><b>Year: 100 ; Semester:         Hamattarn</b></p>";
           echo "<table class=\"altrowstable\" id=\"alternatecolor\" bgcolor=gold >\n";
                 echo "<tr align=center>\n";
         for ($i=0; $i<$number_cols1; $i++)
                     {
echo "<th>" . mysql_field_name($query1,     $i). "</th>\n";
                     }
                     echo "</tr>\n";
               while ($row = mysql_fetch_row        ($query1))
                    {
                    echo "<tr align=center>\n";
          for ($i=0; $i<$number_cols1; $i++)
                    {
                    echo "<td>";
            if (!isset($row[$i]))
                    {echo "NULL";}
                    else
                    {
                    echo "<b>".$row[$i]."</b>";
                    }
                    echo "</td>\n";
                    }
                    echo "</tr>\n";
                    }
                    echo "</table>";
                    echo"</span>" ;

CSS

 table.altrowstable td {
 border-width: 2px;
 padding: 4px;
 border-style: solid;
 border-color: #a9c6c9;
 }
 .oddrowcolor{
  background-color:#d4e3e5;
  }
  .evenrowcolor{
  background-color:#c3dde0;
  }

WHAT IS CURRENTLY DISPLAYED

Answer 1

why dont you use jquery to do the alternating, that way your server isn't being bothered by doing something that the client can do.

using jquery :odd selector, combined with addclass()

// Just a quick example.
$('.classSelector:odd').addClass('oddrowcolor');

Then you can get rid of the for() in the php statement and just echo out the data without custom formatting.

On each tr , add a class called classSelector

Simply put this just before your closing </body> tag.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    $('.classSelector:odd').addClass('oddrowcolor');
</script>

Here is a working example: http://jsfiddle.net/kNGpB/