title: jQuery Click Cell to Change into Text Box
body: <p>I have been looking on Google and StackOverflow but haven't been able to find what I'm after as of yet. If someone could point me in the right direction that would be great.</p>
  
  <p>What I have is a table with 5 rows</p>
  
  <pre><code>&lt;tr&gt;
      &lt;th scope="row" class="table-check-cell"&gt;&lt;input type="checkbox" name="selected[]" id="table-selected-1" value="1"&gt;&lt;/th&gt;
      &lt;td&gt;123456&lt;/td&gt;
      &lt;td&gt;Address 1&lt;/td&gt;
      &lt;td&gt;10th Feb 2011 (10:43am)&lt;/td&gt;
      &lt;td&gt;&lt;ul class="keywords"&gt;
          &lt;li class="pink-keyword"&gt;Awaiting Reply&lt;/li&gt;
          &lt;li class="purple-keyword"&gt;Direct&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/td&gt;
      &lt;td&gt;(Notes Text)&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td class="table-actions"&gt;
          &lt;a href="#" title="View" class="with-tip"&gt;&lt;img src="images/magnifier.png" width="16" height="16"&gt;&lt;/a&gt;
          &lt;a href="#" title="Edit" class="with-tip"&gt;&lt;img src="images/pencil.png" width="16" height="16"&gt;&lt;/a&gt;
          &lt;a href="#" title="Validate" class="with-tip"&gt;&lt;img src="images/navigation.png" width="16" height="16"&gt;&lt;/a&gt;
          &lt;a href="#" title="Close" class="with-tip"&gt;&lt;img src="images/cross-circle.png" width="16" height="16"&gt;&lt;/a&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>What I am looking to do is be able to edit the <code>&lt;td&gt;(Notes Text)&lt;/td&gt;</code> value in the table cell by clicking on it so it changes to an input box (displaying currently what is in the cell) so it can be edited and saved again by clicking off it.</p>
  
  <p>I have a (very) basic knowledge in jQuery but fine with the updating side of things using PHP / MySQL.</p>
  
  <p>Any help would be great.</p>
  
  <p>Thanks</p>