title: How to change text into text input element - jQuery
body: <p>I have a table in my page as below;</p>
  
  <pre><code>&lt;table id="tbl" cellpadding="0" cellspacing="0" style="width: 100%"&gt;
    &lt;tr&gt;
      &lt;td class="field1s"&gt;field1x&lt;/td&gt;
      &lt;td class="field2s"&gt;field2x&lt;/td&gt;
      &lt;td class="field3s"&gt;field3x&lt;/td&gt;
      &lt;td class="field4s"&gt;field4x&lt;/td&gt;
      &lt;td class="xx"&gt;#&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The table contains <strong>so many rows</strong>. When I click last cell (xx), I want all other texts in the row change to <code>&lt;input type="text" /&gt;</code> having corresponding classes respectively, with their corresponding texts inside. And when user again click <code>xx</code>, the row may be updated with changed text. </p>
  
  <p>I caught data and made some work already.</p>
  
  <p><strong><a href="http://jsfiddle.net/767y4/" rel="nofollow">Here</a></strong> is the fiddle</p>