How to change text into text input element - jQuery
<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>

<p>Thanks in advance...<code>:)</code></p>
