我有表格,我正在使用内联编辑来编辑表格,我的问题是文本框大小很常见
对于所有的时间
例如
如果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;