jquery - 内联行编辑 - 添加一个选择输入选项修复输入文本框的重新缩放

Question

我稍微重做了这段代码，我想知道当我点击一个有值的字段时，我该如何解决这个烦人的重新缩放。另一件事是如何使优先级字段成为选择输入而不是输入我知道代码 $(this).html('<input id="editbox" type="text" value="' + $(this).text() + '">');对此负责。可能 if 会修复它或者它怎么可能？我已经为此工作了很长一段时间，但我被困住了。感谢您提供任何提示。

http://jsfiddle.net/8dpQe/

$(document).ready(function () {
    $('td.edit').click(function () {
            $('.ajax').html($('.ajax input').val());
            $('.ajax').removeClass('ajax');

            $(this).addClass('ajax');
            $(this).html('<input id="editbox" type="text" value="' + $(this).text() + '">');
            $('#editbox').focus();
        }
    );

    $('td.edit').keydown(function (event) {
            arr = $(this).attr('class').split(" ");
            if (event.which == 13) {
                $.ajax({
                    type: "POST",
                    url: "ticketmodifier.php",
                    data: "value=" + $('.ajax input').val() + "&rownum=" + arr[2] + "&field=" + arr[1],
                    success: function (data) {
                        $('.ajax').html($('.ajax input').val());
                        $('.ajax').removeClass('ajax');
                        console.log(data);
                    }
                });
            }
        }
    );

    $('#editbox').bind('blur', function () {

        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
    });
});

Answer 1

请检查 fiddle http://jsfiddle.net/8dpQe/6/添加了找到最宽跨度的东西。另请注意，HTML 已修改为包含 span 内的所有内容。以下是核心更改。

    //find max width
    var maxWidth=0;
    var elementIndex=$(this).index();

    $(this).parents('table').find('tr:not(:has(th))').each(function(index,value){
        var element=$(value).find('td:eq('+elementIndex+')');
        maxWidth=(parseInt(element.width())>maxWidth)?element.width():maxWidth;
        debugger;
    });
    //end find max width