在数据表中的可编辑字段中使用Tab键

现在我有一个数据表，有些字段是可编辑的，有些则不是。 我有以下代码（取自表格中可编辑字段之间的标签 ）：

$('#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 }; }); 

这适用于每个可编辑字段的标签！ 除了一个问题：我需要能够标记到字段，从可编辑字段的下拉列表中选择一个值，然后才能选项卡。 现在，如果我不改变字段中的值，我可以通过每个标签。 如果我更改了值，标签将停止，我必须重新点击下一个字段。 救命？

我正在使用：

数据表 – http://datatables.net/

引导

jquery jeditable

Answer 1

我找到了解决方案。

  $('#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 } });