title: JQuery change text to input
body: <p>I have a table setup like below:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td class="url"&gt;
         &lt;a href="http://www.domainname.com/page1.html" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="url"&gt;
         &lt;a href="http://www.domainname.com/page2.html" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="url"&gt;
         &lt;a href="http://www.domainname.com/page3.html" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I basically want the anchor to change to a text box containing the href when the link is click, below are example results:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td class="url"&gt;
         &lt;input type="text" value="http://www.domainname.com/page1.html" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="url"&gt;
         &lt;a href="http://www.domainname.com/page2.html" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="url"&gt;
         &lt;a href="http://www.domainname.com/page3.html" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When another anchor tag is click or the text box is unfocused, any text boxes go back to being a anchor and the clicked one changes to a text box.</p>