Question

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

＆＃13;

$(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");
        });
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

我面临的问题

下拉列表或选项显示不正确，当我点击它们两次时，它会占用所有选项并合并它们并设置为原始值。

我需要什么

只有单击一个单元格时，才会显示带有选项但选项或下拉列表的可编辑表格。
按Enter键后，新值将显示在控制台中，原始值将保留在其单元格中。
如果可能的话，下拉列表或选项不应显示为下拉列表或选项，并且不应显示右箭头。
单击单元格后，单元格的宽度不应更改。

帮我找到更好的方法来告诉我这里我做错了什么。提前谢谢。

Answer 1

您需要在表格中为修改功能设置自定义按钮。在您第一次点击 td 时的代码中，点击事件就会触发。此外，当您点击当时的下拉列表时 td点击事件触发。因为下拉选项没有正确显示

下拉列表未显示在可编辑的表格单元格

1 个答案: