CONTENTEDITABLE在HTML表格(Contenteditable in HTML tab

2019-10-19 04:29发布

随着代码:

<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键我去细胞只是细胞我只是编辑,这样我可以编辑该单元格下方。

目前,我不得不用鼠标去下一个单元格,但如果我能按回车 ,进入到细胞,它会帮助我编辑单元格快一点。 再加上更新的数据将存储在我的数据库,所以我也不想存储在数据库中不必要的空间。

但我不知道我能做些什么。 是否有任何的例子,我可以看看?

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()
    }
})

* UPDATE *

请注意,我已经更新了的jsfiddle也选择文本时按ENTER键 。 对于前面的示例只专注于下一个TD,请使用http://jsfiddle.net/v2Tdn/1/ 。



Answer 2:

我内置的JS完全可编辑表“网格”和HTML之前..和背后的逻辑简单地说就是如下:1在你的餐桌,你的布局所有的cols后,添加一个动作关口,并添加一个“编辑”链接指向编辑功能每一行,在此编辑链接通过行索引所以..它看起来就像是:

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

2 - 你的编辑功能将在您的列的简单循环使用的rowIndex和与文本框的标签替换文本值

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

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

现在,你应该有一个完全可编辑的行..上最后一件事,就是添加了“编辑”链接旁边的“取消”链接,将再次循环就排列类似的编辑链接,并用跨度或替换文字标签只是纯HTML的“”原始值..

你可能想知道我怎么会有原著TD值,以及在这种情况下,我们补充说carrys的TD值的隐藏字段,因此当用户点击编辑后取消。 我们编辑之前得到的细胞原始值,

希望帮助。



Answer 3:

演示展示了如何捕获和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库,可以读取键盘输入键,javascript,以“逃离”的版本通过设置焦点其他地方,也许在未来的TD与CONTENTEDITABLE。 :

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



文章来源: Contenteditable in HTML tables