How to change element style back to normal if clicked somewhere else?

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

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

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

 });

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.

How can I do this and any suggestions for improving my function $('.editRow').click

//////////// Edited //////////

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

I am using this but the input fields are not changing back to text.

Thank You.

Answer 1

You could just handle the blur event just like you did for the click.

   $('.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(){  do something else});

hope this helps

UPDATE

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

               //change the .inputTxt control to a span 
            });

    })

Answer 2

You could also put a click handler on the table element. All clicks will then go though that handler due to bubbling.

Answer 3

Your .blur(...) handler should not be called since the row itself never receives focus. You could instead put a blur handler on each of the editable controls. Inside that handler, you check to see if any of the editable fields has the focus. If not, you call the routine that finishes the edit mode.

-EDIT-

You weren't too far off in your edited guess above. Try something like this:

$('.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('.1u').slideDown('fast');
        row.find('.1p').slideDown('fast');
        row.find('.inputTxt').slideUp('fast');
    });
})

Answer 4

This blur function was not working so i just added a cancel button to do the job.