[jquery] edit in place

Question

Hello,

I have a table like this

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

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.

     $('.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');
 });

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

Thank You.

Answer 1

Your blur is applying on the button (td.editRow) but not applying on the input fields. I think you should separate the code and it should works.

        $('.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');
                    });
        });

Answer 2

There's a nice plugin for this

Answer 3

Just edited my function because the plugin didn't suite well for my application

     $('.editRow').live('click', function() {
            var row = $(this).parent('td').parent('tr');
            row.find('.1u').slideUp('fast');
            row.find('.1p').slideUp('fast');
            row.find('.inputTxt').slideDown('fast');
   $(this).parent('td').empty().append('<a href=# class=cancel>Cancel</a> / <a href=# class=save>Save</a>');
    });