Нужно решение jQuery для ввода проблемы размера для редактирования на клике в ячейке таблицы - PullRequest
Новая
       1

Нужно решение jQuery для ввода проблемы размера для редактирования на клике в ячейке таблицы

0 голосов
/ 01 августа 2011

Я НЕ ищу плагин решение здесь!Я хотел бы самый простой способ решить эту проблему с минимальным кодированием.

<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 наших из 10 в понимании jQuery и его функций.

Ответы [ 2 ]

2 голосов
/ 11 октября 2012

Просто для предотвращения возможных проблем очищайте ввод при двойном щелчке. 

$('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();
    }
});
2 голосов
/ 01 августа 2011

Попробуйте следующее. 

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

Я также взял на себя смелость не вводить данные при снятии фокусировки.Демоверсия здесь .

...