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

时间:2014-02-20 21:50:22

标签: jquery css

我重新编写了这段代码,我想知道当我点击一个有价值的字段时,我怎么能修复这个恼人的重新缩放。另一件事是如何使优先级字段的异常成为选择输入而不是输入我知道代码$(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');
    });
});

1 个答案:

答案 0 :(得分:1)

请检查小提琴http://jsfiddle.net/8dpQe/6/添加了找到最宽范围的内容。另请注意,HTML已修改为包含跨度内的所有内容。以下是核心变化。

    //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