Question

使用代码：

<table>
<tr><td contenteditable>My_Name</td><td>Surname</td></tr>
<tr><td contenteditable>My_Name2</td><td>Surname2</td></tr>
</table>

您可以编辑HTML表格中的单元格。我的问题是当我编辑单元格并按输入时，它会在单元格中创建一个新行。我真正想要的是，如果我按回车键，我会转到我刚刚编辑的单元格下方的单元格，以便我可以编辑该单元格。

目前我必须使用鼠标转到下一个单元格，但如果我可以按输入并转到单元格，它将帮助我更快地编辑单元格。此外，更新的数据将存储在我的数据库中，因此我也不希望在数据库中存储不必要的空间。

但我不知道我能做些什么。有什么例子我可以看一下吗？

Answer 1

免责声明：此代码需要JQuery。

这样的东西？ http://jsfiddle.net/v2Tdn/3/

$('td').keypress(function(evt){
    if(evt.which == 13){
        event.preventDefault();
        var cellindex = $(this).index()
        // get next row, then select same cell index
        var rowindex = $(this).parents('tr').index() + 1
        $(this).parents('table').find('tr:eq('+rowindex+') td:eq('+cellindex+')').focus()
    }
})

*更新*

注意，我已经更新了jsfiddle以在按 enter 时选择文本。对于仅关注下一个TD的上一个示例，请使用http://jsfiddle.net/v2Tdn/1/。

Answer 2

我已经构建了一个完全可编辑的表格＆＃34; Grid＆＃34;在JS和HTML之前..和它背后的逻辑简单如下：在布置所有cols后，在表格中添加一个动作col并添加一个＆＃34; edit＆＃34;指向编辑函数的每一行中的链接，在此编辑链接中传递行索引所以..它将如下所示：

<a href='javascript:void(0)' id='EditBtn' onclick='Edit("+ rowIndex +")'>Edit</a>"

2-您的编辑功能将使用该rowIndex在您的列上进行简单循环，并将文本值替换为文本框标记

"<input type='text' id='nominal' id='editableField' >" + tdTxt + "</input >"

避免制作＆＃34;编辑＆＃34;列可编辑

现在，你应该有一个完全可编辑的行.. 最后一件事，就是在＆＃34;编辑＆＃34;旁边添加。链接a＆＃34;取消＆＃34;链接将在Row列上再次循环，如编辑链接和用Span替换Text标签或仅使用＆＃34;＆＃34;原始价值..

您可能想知道我将如何获得原始td值，在这种情况下我们添加了一个隐藏字段来获取td值，因此当用户在编辑后单击取消时。我们在编辑之前得到单元格原始值

希望有所帮助。

Answer 3

Demo显示了如何在按下回传键时捕获和preventDefault操作。

这是诀窍的代码：

$('table').bind('keypress', function (e) {
        var code = e.keyCode || e.which;
        if (code == 13) {
            console.log("Enter pressed");
            e.preventDefault();
            //    focus 'td' in next column using jQuery '.focus()'
        }
        return false;
    });

Answer 4

你必须明白''contenteditable'正在使你的标记表现得像<textarea>。通常，人们按选项卡键可以从表单字段跳到另一个表单。

使用jQuery javascript库，你可以读取键盘上的输入键，javascript它可以通过设置其他地方的焦点来“逃避”版本，也许是下一个具有contenteditable的td。：

$(document).ready(function () {
    var $editableTd = $('td[contenteditable]');
    $editableTd.bind('keypress', function (e) {
        var code = e.keyCode || e.which;
        if (code == 13) {
            var ind = $editableTd.index(this); //check next td to target
            $editableTd.eq(ind + 1).focus(); //set focus to it
            e.preventDefault(); //do 'nothing'
        }

    });
});

jsFiddled here

在HTML表格中具有可信度

4 个答案: