title: jQuery how to change class of one <td> based on id of another <td>
body: <p>I have two tables and I want to highlight a cell in table 1 when I hover over another cell in table 2.  Not sure how to get there from here.  I'm thinking I should take the id from table 2 and look for the same id thing in table 1 and add the highlight class.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
    &lt;style&gt; 
  .cell {    background-color:#FFCC00 } 
  .cell-highlight {    background-color:green } 
  &lt;/style&gt; 
    &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
  
  &lt;table border='1' id='table-1'&gt;
      &lt;tr&gt;
          &lt;td class='cell' id='cell-0-0'&gt;Cell 0,0&lt;/td&gt;&lt;td class='cell' id='cell-0-1'&gt;Cell 0,1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='cell' id='cell-1-0'&gt;Cell 1,0&lt;/td&gt;&lt;td class='cell' id='cell-1-1'&gt;Cell 1,1&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br/&gt;
  &lt;table border='1' id='table-2'&gt;
      &lt;tr&gt;
          &lt;td class='cell' id='t2cell-0-0'&gt;2 Cell 0,0&lt;/td&gt;&lt;td class='cell' id='t2cell-0-1'&gt;2 Cell 0,1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='cell' id='t2cell-1-0'&gt;2 Cell 1,0&lt;/td&gt;&lt;td class='cell' id='t2cell-1-1'&gt;2 Cell 1,1&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;script&gt; 
    var id;
    $("td.cell").mouseover(function() { 
      id=$(this).find("id");
      $(this).addClass('cell-highlight' ); 
    }).mouseout(function() { 
      $(this).removeClass('cell-highlight' ); 
    }); 
  
  &lt;/script&gt; 
  
  &lt;/body&gt; 
  </code></pre>