edit in place
<p>I have a table like this</p>

<pre><code>&lt;tr&gt;
 &lt;td&gt;No.&lt;/td&gt;
 &lt;td&gt;Username&lt;/td&gt;
 &lt;td&gt;Password&lt;/td&gt;
 &lt;td&gt;Valid Until&lt;/td&gt;
 &lt;td&gt;Delete&lt;/td&gt;
 &lt;td&gt;Edit&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
 &lt;td&gt;1&lt;/td&gt;
 &lt;td id="1"&gt;
              &lt;div class="1u" style="display: none;"&gt;Username&lt;/div&gt;
              &lt;input type="text" class="inputTxt" value="Username" style="display: block;"/&gt;
            &lt;/td&gt;
 &lt;td id="1"&gt;
              &lt;div class="1p" style="display: none;"&gt;Password&lt;/div&gt;
              &lt;input type="text" class="inputTxt" value="Password" style="display: block;"/&gt;&lt;/td&gt;
 &lt;td&gt;18 Jul 09&lt;/td&gt;
 &lt;td&gt;&lt;button value="1" class="deleteThis"&gt;x&lt;/button&gt;&lt;/td&gt;
 &lt;td class="editRow"&gt;Edit&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>When edit is clicked i run this function this replaces the text with input field, so what i want is to cancel this back to text when somewhere else is click instead of save.</p>

<pre><code>     $('.editRow').click(function() {
  var row = $(this).parent('tr');

  row.find('.1u').slideUp('fast');
  row.find('.1p').slideUp('fast');
  row.find('.inputTxt').slideDown('fast');

 }).blur(function() { 
  row.find('.inputTxt').slideUp('fast');
  row.find('.1u').slideDown('fast');
  row.find('.1p').slideDown('fast');
 });
</code></pre>

<p>with this function text changes to input fields but input fields doesnt change back to text when i click somewhere else.</p>

<p>Thank You.</p>
