需要jQuery解決方案來輸入表格編輯onClick的大小問題

Question

我是不是在這裏尋找插件解決方案！我想用最簡單的編碼來解決這個問題的最簡單的方法。

<code> 
$('td.editable').live('click', function(){ 
    var newhtml = '<input value="'+$(this).text()+'" />';  
    $(this).html(newhtml); 
    $(this).find('input').focus(); 
}); 
</code> 

我曾嘗試與最終寬度值的精度沒有取得成功之後，當談到presentationally是保持原來的表格單元格。

<code> 
$('td.editable').live('click', function(){ 
    var newhtml = '<input value="'+$(this).text()+'" />'; 
    var iwidth = (($(this).width()-15)>50) ? $(this).width()-15 : 50;  
    $(this).html(newhtml); 
    $(this).find('input').focus().css('width', iwidth-22+'px'); 
}); 
</code> 

問題：正如代碼所示，我試圖解決輸入字段的「寬度」問題。我希望輸入的寬度能夠使表格單元不必重新調整大小。我已經嘗試過指定沒有單位的輸入大小，以及沒有成功的「px，em ... etc」單位。

問題：如何確保輸入的表格單元格的寬度正確。我可以補償和重新校準由我自己的兜售，邊框和邊距造成的差異。

我的專長：7我們10年的理解jQuery及其功能。

Answer 1

請嘗試以下操作。

$('td').click(function(){ 
    var input = $('<input/>').attr('value',$(this).text()); 
    var w = $(this).innerWidth(); 
    input.css('width',w).css('border','0'); 
    $(this).empty(); 
    $(this).append(input); 
    input.focusout(function(){$(this).parent().text($(this).val());}); 
    input.focus(); 
}); 

我冒昧地在取消焦點上取消輸入。演示here。

Answer 2

只是爲了防止可能的問題，雙擊時清空輸入。

$('td').click(function(){ 
    if($(this).find('input').length==0) { 
     var input = $('<input/>').attr('value',$(this).text()); 
     var w = $(this).innerWidth(); 
     input.css('width',w).css('border','0'); 
     $(this).empty(); 
     $(this).append(input); 
     input.focusout(function(){$(this).parent().text($(this).val());}); 
     input.focus(); 
    } 
});