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(

Solution 1:

I found the solution.

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