jquery - 如何安装单元格的旧值

Question

思路是这样的：有一个带有数值的盘子，双击单元格开始使其在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>');
        }
    });
}

这是发生的情况的屏幕截图：

Answer 1

您只需要在显示输入之前获取单元格内容的引用，并在删除之前获取输入值的引用

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

演示小提琴

Answer 2

尝试这个

 $('td.editable').on('dblclick', function(){
var current_td= $(this);
var txt= current_td.html();
        current_td.html(function() {
            var input = $("<input type='text' name='fname' />").val(txt);
            return input ;
        });
    });

$('td.editable').keypress(function(event) {
    var value = $(this).find('input').val();
    if ( event.which == 13 ) {
        $(this).html('<td class="editable">'+value+'</td>');
    }
});

Answer 3

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

在data每个 td 的属性中，您将找到原始 txt 以便在必要时恢复...

Answer 4

这是一个工作小提琴：http: //jsfiddle.net/wBq5M/

首先，您必须将 的内容设置<td>为仅在<input>双击时。

$('td.editable').on('dblclick', function(){
    var myText = $(this).text();
    var input = $('<input type="text" name="fname" />').val(myText);
    $(this).html(input);
});

然后，您需要在按键上提升文本输入的值：

$('td.editable').keypress(function(event) {
    var textValue = $('input', this).val();    // Gets the text in <input>
    if ( event.which == 13 ) {
        $(this).html('<td class="editable">' + textValue + '</td>');
    }
});

Answer 5

尝试

$('td.editable').on('dblclick', function(){
    var $this = $(this), text = $.trim($this.text());

    $('<input />', {
        name: 'fname',
        value: text
    }).appendTo($this.empty())
});

$('td.editable').on('keypress', 'input', function(event){
    if ( event.which == 13 ) {
        var $this = $(this), text = $.trim($this.val());
        $(this).closest('td').html(text);
    }
})

演示：小提琴