title: Edit table data cell using a edit icon shown over hover
body: <p>I have a grid with multiple cols &amp; rows. I want edit just one cell at a time. By showing a edit icon when the user hovers the td, I want the user to be able to click the edit icon and then the td becomes editable. onblur will retain the new value and the edit icon is also hidden when the td is not in focus.</p>
  
  <p>I am not able to write the code for this, I want to apply JQuery techniques.</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;1&lt;/th&gt;
      &lt;th&gt;2&lt;/th&gt;
      &lt;th&gt;3&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr id="r1"&gt;
      &lt;td&gt;- |&lt;/td&gt;
      &lt;td&gt;blah 1 |&lt;/td&gt;
      &lt;td&gt;blah 2 &lt;div class="editit" style="background:url(pencil.png) no-repeat"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p>It will be great if the JQuery experts help me solve this issue. </p>