javascript - 下拉列表未出现在可编辑表格单元格中

Question

我想创建一个可编辑的表格。我可以在其中更改表格单元格的内容。简单输入工作正常，但下拉或选择不起作用。这是我所做的示例。

$(function() {
    $("td").click(function() {
        var OriginalContent = $(this).text();
        console.log(OriginalContent);
        $(this).addClass("cellEditing");
        $(this).html("<select><option>1</option><option>2</option><option >3</option></select>");
        $(this).children().first().focus();

        $(this).children().first().keypress(function(e) {
            if (e.which == 13) {
                var newContent = OriginalContent;
                $(this).parent().text(OriginalContent);
                $(this).parent().removeClass("cellEditing");
                console.log('value' + $(this).val());
            }
        });
        $(this).children().first().blur(function() {
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
    });
});

.editableTable {
    border:solid 0px;
    width:100%;
    text-align:center
}
.editableTable td {
    border:solid 1px;
}
.editableTable .cellEditing {
    padding: 0;   
}
select{
  border:0px;
  border-color:none
}
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="editableTable">
       
        <tbody>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
        </tbody>
    </table>

我面临的问题

• 下拉菜单或选项未正确显示，当我点击它们两次时，它会获取所有选项并将它们合并并设置为原始值。

这里需要什么

• 带有选项但选项或下拉列表的可编辑表格应仅在单击单元格时出现。

• 按回车键后，新值出现在控制台中，原始值保留在其单元格中。

• 如果可能的话，下拉菜单或选项不应像下拉菜单或选项那样显示，也不应显示右箭头。

• 点击单元格后，单元格的宽度不应改变。

帮我找到一个更好的方法来做这件事，或者告诉我我做错了什么。提前致谢。

Answer 1

您需要为表格中的编辑 功能设置自定义按钮。 在您的代码中，当您第一次点击 td 时，您的点击事件被触发。 而且当你点击下拉菜单时也会触发 td click 事件。 因为那个下拉选项没有正确显示