2

アイデアは次のとおりです。値を含むプレートがあり、セル開始をダブルクリックして INPUT に作成し、セル値を「入力」に表示する方法を説明します。 jsfiddle のコード

変換を行い、「入力」にセルの値を表示する関数は次のとおりです。

function convertToInput() {
    $('td.editable').on('dblclick', function(){
        $(this).html(function() {
            var input = '<input type="text" name="fname" />';
            var textEditable = $('td.editable');
            return input + textEditable;
        });
    });
    $('td.editable').keypress(function(event) {
        if ( event.which == 13 ) {
            $(this).html('<td class="editable"></td>');
        }
    });
}

これが何が起こるかのスクリーンショットです：

ここに画像の説明を入力

4

5 に答える 5

1 
$('td.editable').on({
   'dblclick': function(){
      var txt=this.innerHTML;
      $(this).data('orig',txt); 
             .html($('<input type="text" name="fname" />').val(txt));
      },
   'keypress': function(event) {
      switch ( event.keyCode ) {
       case 13 :  $(this).html($('input',this).val()) ; break; // return
       case 27 :  $(this).html($(this).data('orig'))  ; break; // escape
      }
})

各 tdのdataプロパティには、必要に応じて復元するための元の txt があります...

于 2013-08-07T07:57:55.487 に答える