редактирования Встроенного в с.в.

Question

У меня есть следующий код, чтобы включить встроенное редактирование TD клетка:

$('.edit_td').click(function(e) { 
    e.stopPropagation(); 
    resetEditedCells(); 
    $(this).addClass('active').html('<input type="text" value="' + $(this).html() + '">'); 
}); 

function resetEditedCells() { 
     $('.edit_td.active').html(function() { 
     return $(this).find('input').val(); 
    }); 
} 

$(document).click(function() { 
    if($('.edit_td').hasClass('active')) { 
     var fisk = $('.active input[type=text]').val(); 
     $('.edit_td').find('input').hide().html(fisk); 
    } 
}); 

У меня есть две проблемы:

1. Когда ТД трансформировался в поле ввода, я не может писать в него новый текст. Я не могу отредактировать текст.

2. Когда я выхожу за пределы таблицы, я хочу, чтобы поле ввода преобразуется обратно в td с его исходным значением текста, но оно не делает этого с моим кодом выше. Поле ввода удаляется, но текст также удаляется/скрывается. Я хочу, чтобы входные данные исчезли.

Кто может мне помочь?

Answer 1

$('.edit_td').on('click', function (e) { 
    e.stopPropagation(); 
    if (! $(this).hasClass('active')) { 
     $(this).addClass('active'); 
     var val = $(this).html(); 
     $(this).html($('<input type="text" value="' + val + '"/>')); 
    } 
}); 

function removeActive() { 
    $('.edit_td').each(function() { 
     if ($(this).hasClass('active')) { 
      var val = $(this).find('input').val(); 
      // not needed - $(this).empty(); 
      $(this).html(val); 
      $(this).removeClass('active'); 
     } 
    }); 
} 

$(document).on('click', function(){ 
     removeActive(); 
}); 

Я немного изменил ваш код, но он должен работать. Надеюсь, это то, что вы хотели, и вот ссылка jsfiddle для тестирования.

http://jsfiddle.net/Grimbode/VN9KE/3/

Answer 2

Я предлагаю вам скрыть/показать окно td/input вместо изменения html, что впоследствии избавит вас от многих неприятностей.