Question

我不在这里寻找插件解决方案！我想用最简单的方法用最少的编码来解决这个问题。

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

在表示与原始表格单元格相同时，我尝试过跟踪最终宽度值的准确性没有成功。

<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 ...等”单位没有成功。

问题：如何确保输入具有正确的表格单元宽度。我可以自行补偿和重新校准由于兜售，边界和边距引起的差异。

我的专长：7我们对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();
    }
});

需要jQuery解决方案来输入大小问题，以便在Table Cell中编辑onClick

2 个答案: