在数据表的可编辑字段中使用制表符 [英] Using tabbing in jeditable fields in datatables
问题描述
现在我有一个数据表,有些字段是可编辑的,有些则不能.我有以下代码(摘录自在表格):
Right now I have a datatable, some fields are editable, some are not. I have the following code (taken from tabbing between jeditable fields in a table):
$('#table .select').bind('keydown', function(evt) {
if(evt.keyCode==9) {
console.log("next");
var nextBox='';
var currentBoxIndex=$("#table .select").index(this);
console.log("currentBoxIndex",currentBoxIndex);
if (currentBoxIndex == ($("#table .select").length-1)) {
nextBox=$("#table .select:first"); //last box, go to first
console.log("nextBox", nextBox);
} else {
nextBox=$("#table .select").eq(currentBoxIndex+1); //Next box in line
console.log("nextBox", nextBox);
}
$(this).find("#table .select").blur();
$(nextBox).click(); //Go to assigned next box
return false; //Suppress normal tab
};
});
此选项非常适用于切换到每个可编辑字段!除了一个问题:我需要能够切换至该字段,从可编辑字段的下拉列表中选择一个值,然后能够切换.现在,如果我不更改该字段中的值,则可以逐个选项卡浏览.如果更改值,则制表符将停止,并且我必须重新单击下一个字段.帮助吗?
This works great for tabbing to each editable field! Except one issue: I need to be able to tab to the field, select a value from a dropdown in the editable field, and then be able to tab. Right now I can tab through each one if I don't change the value in the field. If I change the value, the tabbing will stop and I have to re-click on the next field. Help?
我正在使用:
引导程序
jquery可编辑
推荐答案
我找到了解决方案.
$('#table.select').bind('keydown', function(evt) {
if(evt.keyCode === 9) {
console.log("next");
var nextBox = '';
var currentBoxIndex = $("#table.select").index(this);
console.log("currentBoxIndex",currentBoxIndex);
var showDropdown = function (element) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
element.dispatchEvent(event);
};
if (currentBoxIndex === ($("#table.select").length-1)) {
nextBox = $("#table.select:first"); //last box, go to first
showDropdown($(nextBox).get( 0 ));
} else {
nextBox = $("#table.select").eq(currentBoxIndex+1); //Next box in line
console.log("nextBox", nextBox);
showDropdown($(nextBox).get( 0 ));
}
$(this).find("#table.select").blur();
$(nextBox).click(); //Go to assigned next box
return false; //Suppress normal tab
}
});
这篇关于在数据表的可编辑字段中使用制表符的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!