title: Highlighting a row of table cells using a drop down select menu (different situation)
body: <p>I'm a beginner so I don't really understand Javascript/jQuery too well.</p></p>
  
  <p> I have a table with a drop down menu in the first cell. </p>
  
  <p>What I want is to select an item from the drop down menu and highlight the corresponding row. So if I select 3, the ("3") row will be highlighted.</p>
  
  <p>Similar to <a href="http://jsfiddle.net/j08691/eQNp5/1/" rel="nofollow noreferrer">JSFiddle1</a>:</p>
  
  <pre><code>$(document).ready(function() {
      var color = ['none', 'green', 'yellow', 'red'];
      $('table.table1').on('change','select', function() {
          $(this).parents('tr').css('background', color[$(':selected', this).index()]);
      });​
  });
  </code></pre>
  
  <p>and <a href="http://jsfiddle.net/pXvQG/10/" rel="nofollow noreferrer">JSFiddle2</a>:</p>
  
  <pre><code>function myJSFunction(element)
  {
      var row = element.parentNode.parentNode;
  
      switch(element.options[element.selectedIndex].innerHTML)
      {
          case "Pending":
              row.style.background = "#FF7E00";
              break;
          case "Approved":
              row.style.background = "green";
              break;
          case "Disapproved":
              row.style.background = "red";
              break;
          default:
              row.style.background = "white";
      }
  }
  </code></pre>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="style.css" /&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt; &lt;/script&gt;
  
  &lt;script src="script.js"&gt; &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="wrapper"&gt;
  
  &lt;table class="table1"&gt;
  
  &lt;tr&gt;
  
  &lt;td&gt;&lt;select name="tasks" id="tasks"&gt;
          &lt;option value=""&gt;Tasks&lt;/option&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
                  &lt;option value="5"&gt;5&lt;/option&gt;
                  &lt;option value="6"&gt;6&lt;/option&gt;
                  &lt;option value="7"&gt;7&lt;/option&gt;
                  &lt;option value="8"&gt;8&lt;/option&gt;
                  &lt;option value="9"&gt;9&lt;/option&gt;
                  &lt;option value="10"&gt;10&lt;/option&gt;
  
  &lt;/select&gt;   
  &lt;/td&gt;
  &lt;td class="days"&gt;Monday&lt;/td&gt;
  &lt;td class="days"&gt;Tuesday&lt;/td&gt;
  &lt;td class="days"&gt;Wednesday&lt;/td&gt;
  &lt;td class="days"&gt;Thursday&lt;/td&gt;
  &lt;td class="days"&gt;Friday&lt;/td&gt;
  &lt;td class="days"&gt;Saturday&lt;/td&gt;
  &lt;td class="days"&gt;Sunday&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="row"&gt;
  &lt;td&gt; 1 &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="row"&gt;
  &lt;td&gt; 2 &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="row"&gt;
  &lt;td&gt; 3 &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="row"&gt;
  &lt;td&gt; 4 &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="row"&gt;
  &lt;td&gt; 5 &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="row"&gt;
  &lt;td&gt; 6 &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="row"&gt;
  &lt;td&gt; 7 &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="row"&gt;
  &lt;td&gt; 8 &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="row"&gt;
  &lt;td&gt; 9 &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="row"&gt;
  &lt;td&gt; 10 &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>