title: How to change a <td> background color on click using JavaScript?
body: <p>Am new to Javascript and am trying to do exactly like the below <a href="http://jsbin.com/ajalu/40" rel="nofollow">http://jsbin.com/ajalu/40</a> using the DOM directly rather than using jQuery (the below uses jQuery). How would I do that?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;!--[if IE]&gt;
    &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;style&gt;
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; }
    .on { background-color:red; color:#ffffff; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table border="1" cellpadding="10"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Hello World&lt;/td&gt;
          &lt;td&gt;Hello World&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Hello World&lt;/td&gt;
          &lt;td&gt;Hello World&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Hello World&lt;/td&gt;
          &lt;td&gt;Hello World&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript using jQuery:</p>
  
  <pre><code>$( function() {
    $('td').click( function() {
      $(this).parents('table').find('td').each( function( index, element ) {
          $(element).removeClass('on');
      } );
      $(this).addClass('on');
    } );
  } );
  </code></pre>