在HTML表格中具有可信度 [英] Contenteditable in HTML tables

问题描述

使用以下代码：

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

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

You can edit a cell in an HTML table. My problem is when I edit the cell and press enter, it creates a new line in cell. What I really would like is, if I press enter I go to the cell just below that cell I just edited so that I can edit that cell.

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

Currently I have to use the mouse to go to the next cell, but if I can press enter and go to the cell, it will help me edit the cells a bit faster. Plus the updated data will be stored in my database, so I also don't want unnecessary space stored in the database.

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

But I am not sure what I can do. Is there any example I can look at?

推荐答案

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

Disclaimer: This code requires 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/ 。

Note, I've updated the jsfiddle to also select the text when you press enter. For the previous example which only focused on the next TD, please use http://jsfiddle.net/v2Tdn/1/ .

这篇关于在HTML表格中具有可信度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！