title: JavaScript Change Table Row Class based on Date
body: <p>I'm working on a little website that houses some resources for one of the departments at my university.  Everything is coming along pretty well, so I'm trying to add a little bit of functionality to make things more intuitive.</p>
  
  <p>If you want to see the full HTML structure and everything else, here's the page in question: {link removed to protect personal content}</p>
  
  <p>Basically, it's a table with a row dedicated to each of the camps that we're responsible for this summer.  This is all fine and dandy.  What I want to do, now, is highlight the rows of any camps currently in session (by adding the class "active" to the row).  Given my fairly limited experience with JavaScript, this is what I came up with:</p>
  
  <pre><code>&lt;script type="text/javascript" &gt;
  $(document).ready(function() {
      var today = new Date();
  
      var Traffic_Court_Start = new Date("May 31 2012 12:01 AM");
      var Traffic_Court_Stop = new Date("June 1 2012 11:59 PM");
      var Summer_Enrichment_Start = new Date("June 10 2012 12:01 AM");
      var Summer_Enrichment_Stop = new Date("June 16 2012 11:59 PM");
      var Wbb_Ind_Start = new Date("June 11 2012 12:01 AM");
      var Wbb_ind_Stop = new Date("June 14 2012 11:59 PM");
      var Soccer_Referee_Start = new Date("June 15 2012 12:01 AM");
      var Soccer_Referee_Stop = new Date("June 16 2012 11:59 PM");
      var Broadcast_Start = new Date("June 17 2012 12:01 AM");
      var Broadcast_Stop = new Date("June 21 2012 11:59 PM");
      var Tennis_1_Start = new Date("June 17 2012 12:01 AM");
      var Tennis_1_Stop = new Date("June 21 2012 11:59 PM");
      var Tennis_2_Start = new Date("June 24 2012 12:01 AM");
      var Tennis_2_Stop = new Date("June 28 2012 11:59 PM");
      var Volleyball_Start = new Date("July 8 2012 12:01 AM");
      var Volleyball_Stop = new Date("July 11 2012 11:59 PM");
      var Soccer_1_Start = new Date("July 8 2012 12:01 AM");
      var Soccer_1_Stop = new Date("July 12 2012 11:59 PM");
      var IACAC_Start = new Date("July 9 2012 12:01 AM");
      var IACAC_Stop = new Date("July 11 2012 11:59 PM");
      var Summer_Forensics_Start = new Date("July 15 2012 12:01 AM");
      var Summer_Forensics_Stop = new Date("July 28 2012 11:59 PM");
      var Soccer_2_Start = new Date("July 22 2012 12:01 AM");
      var Soccer_2_Stop = new Date("July 26 2012 11:59 PM");
      var Cross_Country_Start = new Date("July 25 2012 12:01 AM");
      var Cross_Country_Stop = new Date("July 28 2012 11:59 PM");
  
      if((today &lt;= Traffic_Court_Stop &amp;&amp; today &gt;= Traffic_Court_Start))
          {
              document.getElementById('traffic_court').classList.add('active');
          };
  
      if((today &lt;= Summer_Enrichment_Stop &amp;&amp; today &gt;= Summer_Enrichment_Start))
          {
              document.getElementById('summer_enrichment').classList.add('active');
          };
  
      if((today &lt;= Wbb_Ind_Stop &amp;&amp; today &gt;= Wbb_Ind_Start))
          {
              document.getElementById('wbb_ind').classList.add('active');
          };
  
      if((today &lt;= Soccer_Referee_Stop &amp;&amp; today &gt;= Soccer_Referee_Start))
          {
              document.getElementById('soccer_referee').classList.add('active');
          };
  
      if((today &lt;= Broadcast_Stop &amp;&amp; today &gt;= Broadcast_Start))
          {
              document.getElementById('broadcast').classList.add('active');
          };
  
      if((today &lt;= Tennis_1_Stop &amp;&amp; today &gt;= Tennis_1_Start))
          {
              document.getElementById('tennis_1').classList.add('active');
          };
  
      if((today &lt;= Tennis_2_Stop &amp;&amp; today &gt;= Tennis_2_Start))
          {
              document.getElementById('tennis_2').classList.add('active');
          };
  
      if((today &lt;= Volleyball_Stop &amp;&amp; today &gt;= Volleyball_Start))
          {
              document.getElementById('volleyball').classList.add('active');
          };
  
      if((today &lt;= Soccer_1_Stop &amp;&amp; today &gt;= Soccer_1_Start))
          {
              document.getElementById('soccer_1').classList.add('active');
          };
  
      if((today &lt;= IACAC_Stop &amp;&amp; today &gt;= IACAC_Start))
          {
              document.getElementById('IACAC').classList.add('active');
          };
  
      if((today &lt;= Summer_Forensics_Stop &amp;&amp; today &gt;= Summer_Forensics_Start))
          {
              document.getElementById('summer_forensics').classList.add('active');
          };
  
      if((today &lt;= Soccer_2_Stop &amp;&amp; today &gt;= Soccer_2_Start))
          {
              document.getElementById('soccer_2').classList.add('active');
          };
  
      if((today &lt;= Cross_Country_Stop &amp;&amp; today &gt;= Cross_Country_Start))
          {
              document.getElementById('cross_country').classList.add('active');
          };
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see, I start by getting today's date, then I specify the start and end dates for each of the camps.  Then, I use a bunch of if-statements to determine if 'today' is in between the start and end dates for each camp.  If that is true, it adds the class "active" to the row corresponding to that camp.</p>
  
  <p>It seems to work correctly for the first two camps...that is, if I change the value of 'today' to May 31 it highlights the first row.  Or if I change it to June 15 it highlights the second row.  The problem is that if 'today' is June 15, it should highlight BOTH the summer_enrichment and soccer_referee rows.  It only highlights the summer_enrichment row.</p>
  
  <p>I've double-checked the element IDs that I reference, the spelling of my variables, etc. and everything seems to look correct (unless I missed something obvious).  Is there any reason why I can't use the script as I've presented it?  I don't think this is the case, but is there a problem with using so many if-statements in a row like that?  My only thought is that perhaps it thinks they are a bunch of else-cases but I thought I'd escape that with the semi-colon after each if-statement.</p>
  
  <p>Any thoughts?  Perhaps a better way to do this?  I looked around for some answers but couldn't seem to find something similar anywhere else (though I'm sure this has been done before and with better implementation).</p>
  
  <p>THANKS FOR YOUR HELP!!!</p>
  
  <p>EDIT: After getting everything to work with the help of some of these responses, I figured I'd share the final code for future users who might stumble upon this question.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      var today = new Date();
  
      var SCHEDULE = {
          'tc': ['May 31 2012', 'June 1 2012'],
          'se': ['June 10 2012', 'June 16 2012'],
          'wbb': ['June 11 2012', 'June 14 2012'],
          'sr': ['June 15 2012', 'June 16 2012'],
          'broadcast': ['June 17 2012', 'June 21 2012'],
          'ten1': ['June 17 2012', 'June 21 2012'],
          'ten2': ['June 24 2012', 'June 28 2012'],
          'volleyball': ['July 8 2012', 'July 11 2012'],
          'soc1': ['July 8 2012', 'July 12 2012'],
          'iacac': ['July 9 2012', 'July 11 2012'],
          'sf': ['July 15 2012', 'July 28 2012'],
          'soc2': ['July 22 2012', 'July 26 2012'],
          'cc': ['July 25 2012', 'July 28 2012']
      };
  
      for (var camp in SCHEDULE) {
      console.log('checking ' + camp + ', dates have to be within the ' + SCHEDULE[camp] + ' range');
      //console.log(Date.parse(SCHEDULE[camp][0]));
          if (today &gt;= Date.parse(SCHEDULE[camp][0]) &amp;&amp; today &lt;= Date.parse(SCHEDULE[camp][1])) {
              console.log(camp + ' is currently in session!');
              document.getElementById(camp).classList.add('active'); 
          };
      };
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>THANKS A LOT EVERYONE!!!</p>