Question

当我尝试使用此代码将数据输入到单元格中时，要输入的td单元格被拉伸。如何防止这种情况，并保持其正常大小？如果您尝试在表格的任何单元格中输入一个值，则可以更好地理解我的意思。谢谢。

Jsfiddle示例：https://jsfiddle.net/cw3rojpz/

HTML:
<table>
<tr><td>5</td><td>5</td></tr>
<tr><td>2</td><td></td></tr>
<tr><td></td><td>5</td></tr>
</table>

jQuery：

$(function () {
    $("td").dblclick(function () {
        var OriginalContent = $(this).text();

        $(this).addClass("cellEditing");
        $(this).html("<input type='text' value='" + OriginalContent + "' />");
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });

    $(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
    });
    });
});

CSS：

table {
    font-size: 14px;
    border: 1px solid #8ab6d1; 
    font-family: Arial, Helvetica, sans-serif;
} 

table td {
    padding: 2px;
    margin: 1px;
    border: 1px solid #8ab6d1;
}

Answer 1

您需要设置输入框的宽度，例如：

input[type=text]
{
 width: 50px;
}

在此处https://jsfiddle.net/cw3rojpz/2/

使用jQuery输入数据时调整长度

1 个答案: