我有表格,我正在使用内联编辑来编辑表格,我的问题是文本框大小很常见
对于所有的时间
例如

如果td小,则文本框如下所示



如果td大,则文本框如下所示



谁能帮助我如何使文本框更宽
适用于较大的文本字段和较小的文本字段
对于小文本字段,
下面是我的代码

< script >

$(document).ready(function () {
    $('td.edit').click(function (e) {

        var $target = $(e.target);
        if ($target.is('#editbox')) {
            return;
        }
        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
        $(this).addClass('ajax');
        $(this).html('<input id="editbox"  size="10" type="text" value="' + $(this).text() + '">');

        $('#editbox').select();

    });

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

    $('#editbox').live('blur', function () {
        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
    });
}); < /script>


更新:

现在看起来

最佳答案

在您的文本框中添加样式

this $(this).html('<input style="width:100%; box-sizing: border-box;" id="editbox"  size="10" type="text" value="' + $(this).text() + '">');


或在CSS中

input[type="text"] {
     width: 100%;
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
 }


在mozilla中使用此样式,您应该添加-moz-box-sizing: border-box;

09-11 19:04
查看更多