在数据表的可编辑字段中使用制表符 [英] 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?

我正在使用:

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

引导程序

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屋！