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

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 事件。 因为那个下拉选项没有正确显示