Как изменить стиль элемента обратно на нормальный, если щелкнуть где-то еще?

Question

У меня есть такая таблица

<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>

Когда нажата кнопка редактирования, я запускаю эту функцию

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

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

    });

это заменяет текст на поле ввода, так что я хочу отменить это обратно к тексту, когда где-то еще есть щелчок вместо сохранения.

Как я могу это сделать и любые предложения по улучшению моей функции $('.editRow').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() { 
        row.find('.inputTxt').slideUp('fast');
        row.find('.1u').slideDown('fast');
        row.find('.1p').slideDown('fast');
    });

Я использую это, но поля ввода не изменяются обратно на текст.

Спасибо.

Answer 1

Вы можете просто обработать событие размытия точно так же, как и для клика.

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

надеюсь, это поможет

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

Ваш обработчик .blur (...) не должен вызываться, поскольку сама строка никогда не получает фокус. Вместо этого вы можете поместить обработчик размытия на каждый из редактируемых элементов управления. Внутри этого обработчика вы проверяете, находится ли какое-либо из редактируемых полей в фокусе. Если нет, вы вызываете подпрограмму, которая завершает режим редактирования.

-EDIT-

Вы не были слишком далеко в своем отредактированном предположении выше. Попробуйте что-то вроде этого:

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

Эта функция размытия не работала, поэтому я просто добавил кнопку отмены, чтобы сделать работу.

Answer 4

Вы также можете поместить обработчик кликов в элемент таблицы. Все клики будут затем обрабатываться этим обработчиком из-за пузырей.