如何恢复可编辑单元格的宽度？

Question

我有可编辑的单元格，当我在表格单元格内单击时，单元格的宽度会变宽，但当我离开单元格时，我希望表格恢复到正常宽度。因为否则€标志离价格太远了。

​

    // Editable Cells

    $(document).on('click', '.editable', function(event) {
            if ($(this).children("input").length > 0)
                return false;
            var tdObj = $(this);
            var preText = tdObj.html();
            var inputObj = $("<input type='text' />");
            tdObj.html("");
            inputObj.width(tdObj.width())
                .height(tdObj.height())
                .css({
                    border: "0px",
                    width: "30%",
                })
                .val(preText)
                .appendTo(tdObj)
                .trigger("focus")
                .trigger("select");
            inputObj.keyup(function (event) {
                if (13 == event.which) { // press ENTER-key
                    var text = $(this).val();
                    tdObj.html(text);
                } else if (27 == event.which) { // press ESC-key
                    tdObj.html(preText);
                }
            });
            inputObj.click(function () {
                return false;
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th >Price</th>
    <th>Lastname</th> 
  </tr>
  <tr>
    <td>Jill</td>
    <td><span class="editable">50</span> €</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>Eve</td>
    <td><span class="editable">50</span> €</td>
    <td>Jackson</td> 
  </tr>
</table>

​

Answer 1

将以下代码放入您的click函数：

inputObj.blur(function(event) {
    tdObj.html(preText);
});

代码：

$(document).on('click', '.editable', function(event) {
    if ($(this).children("input").length > 0)
        return false;
    var tdObj = $(this);
    var preText = tdObj.html();
    var inputObj = $("<input type='text' />");
    tdObj.html("");
    inputObj.width(tdObj.width())
        .height(tdObj.height())
        .css({
            border: "0px",
            width: "30%",
        })
        .val(preText)
        .appendTo(tdObj)
        .trigger("focus")
        .trigger("select");
    inputObj.keyup(function (event) {
        if (13 == event.which) { // press ENTER-key
            var text = $(this).val();
            tdObj.html(text);
        } else if (27 == event.which) { // press ESC-key
            tdObj.html(preText);
        }
    });
    inputObj.blur(function(event) {
        tdObj.html(preText);
    });
    inputObj.click(function () {
        return false;
    });
});