Question

我正在尝试实现一个html表，它允许在单元格获得焦点并将其值设置为单元格的值时，通过在其上放置输入控件来编辑单元格中的数据。当输入控件失去焦点时，其值将被放入正在编辑的单元格中，并且输入控件将被隐藏。

代码看起来像这样。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
    <title></title>
</head>
<body>
    <table style="border:1px solid black;">
        <tbody>
            <tr>
                <td>This is line 1</td>
                <td id="cell1" class="editable" contenteditable="true" stye="width:100px;text-align:right;">1234567</td>
            </tr>
            <tr>
                <td>This is line 2</td>
                <td id="cell2" class="editable" contenteditable="true" stye="width:100px;text-align:right;">98765</td>
            </tr>
        </tbody>
    </table>
    <input id="editor" data-cellid="#cell1" type="number" style="text-align:right;" value="">
    <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        $(".editable").on("focus", function () {
            $("#editor").val($(this).text());
            $("#editor").data("cellid", "#" + $(this).attr("id"));
            $("#editor").height($(this).height());
            $("#editor").width($(this).width() + 20);
            var pos = $(this).offset();
            $("#editor").offset({top: pos.top, left: pos.left});
            $("#editor").show();
            $("#editor").focus();
        })

        $("#editor").on("blur", function () {
            var value = $(this).val();
            var id = $(this).data("cellid");
            $(id).text(value);
            $(this).hide();
        })</script>

</body>

第一次单击其中一个可编辑单元格时，输入控件已正确定位。在第二次和随后点击任何可编辑单元格时，输入控件在屏幕下方比最后一个位置更向下一行，并且还向右移动。

我做错了什么？

Answer 1

看来.position对隐藏元素没有影响。我删除了$（this）.hide（）行，现在编辑器正确定位。我必须在设置位置之前显示#editor，但这不会引起任何视觉上的怪异。

如何动态定位另一个元素左上角的页面元素

1 个答案: