随着代码:
<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键我去细胞只是细胞我只是编辑,这样我可以编辑该单元格下方。
目前,我不得不用鼠标去下一个单元格,但如果我能按回车 ,进入到细胞,它会帮助我编辑单元格快一点。 再加上更新的数据将存储在我的数据库,所以我也不想存储在数据库中不必要的空间。
但我不知道我能做些什么。 是否有任何的例子,我可以看看?
免责声明:此代码需要的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/ 。
我内置的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值的隐藏字段,因此当用户点击编辑后取消。 我们编辑之前得到的细胞原始值,
希望帮助。
演示展示了如何捕获和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;
});
你必须明白,“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