HTML 表格中的内容可编辑

Question

附上代码：

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

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

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

但我不确定我能做什么。有什么可以看的例子吗？

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

我之前在 JS 和 HTML 中构建了一个完全可编辑的表格“网格”。它背后的逻辑简单如下： 1-在您布局所有列后，在表格中添加一个操作列并在指向编辑函数的每一行中添加一个“编辑”链接，在此编辑链接中传递行索引，所以..它看起来像这样：

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

2- 您的 Edit 函数将使用该 rowIndex 对您的列进行简单循环，并用文本框标签替换文本值

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

只是避免使“编辑”列可编辑

现在，您应该有一个完全可编辑的行.. 最后一件事是在“编辑”链接旁边添加一个“取消”链接，该链接将在“编辑”链接等行列上再次循环，并将文本标签替换为跨度或纯 html 为“”原始值..

您可能想知道我将如何获得原始 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>。通常，人们按下 tab 键可以从一个表单域跳到另一个域。

使用 jQuery javascript 库，您可以读取键盘上的 enter 键，通过将焦点设置在其他地方来“转义”版本，也许是下一个带有 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