Question

我正在寻找一种方法来允许用户使用箭头键在html表格中的单元格之间移动。我想使用jQuery来做这个，并假设我需要为每个键创建一个事件监听器，然后以某种方式使用父/子在td之间移动焦点。我目前正在使用contenteditable使td单元格可编辑，因此每次用户移动上一个td $(this).prop('contenteditable', false)时，新的td将变为{{ 1}}

我的问题：我正在寻找有关如何设置这些事件监听器的方向。

$(this).prop('contenteditable', true)

$(document).ready(function () {

    var old;
            
    $('td').click(function(){
                
        old=$(this).text();
                
        $(this).prop('contenteditable', true);
                
                
    });
            
    var saveTimeout;
            
    // Remove the "saved" class on keydown
    $('td').on('keydown', function(e) {
        $(this).removeClass("saved");
    });
    
    $('td').on('input blur', function(e) {
                                
        var timeoutDelay=2500;
               
        if( e.type == "blur"){
            timeoutDelay=1;
        }
                
        // If NOT already saved...
        if( !$(this).hasClass("saved") ){
            var _this = $(this); // preserve reference to the input field here
            
            // Add the "saved" class to prevent other saving
            _this.addClass("saved");
            
            clearTimeout(saveTimeout);
            saveTimeout = setTimeout(function() {
                console.log(_this)
                $.ajax({
                    method: "POST",
                    url: "updatedatabase.php",
                    data: { 
                        content: _this.text(), 
                        date: _this.siblings().first().text(),
                        prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(),
                        old: old
                    }
                })
                .done(function( msg ) {
                    alert( msg );
                });

                toastr.options = {
                    "positionClass": "toast-top-center",
                    "onclick": null,
                    "timeOut": "2500",
                }

                toastr.info(old,'Database Updated!<br><br>Your Previous Amount Was:');
                        
                _this.prop('contenteditable', false);
                        
            }, timeoutDelay);
        }
    });
            
            
    $("td").hover(function(){
                                
                
                    
        $(this).addClass('highlight').siblings().first().addClass('highlight');

        $('tr:eq(1) th:eq('+$(this).index()+')').addClass('highlight');
                
                
    },function(){
                
                
                    
        $(this).removeClass("highlight").siblings().first().removeClass('highlight');

        $('tr:eq(1) th:eq('+$(this).index()+')').removeClass('highlight');
                
                
    });
    
});

table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
        
}

.highlight {
    
    background-color:#E0E0E0;
    color: blue;
}

Answer 1

添加

document.addEventListener('keypress', function(e) {
    var code = e.which || e.keyCode;
    if (code == '38') {
        // Up
    }
    else if (code == '40') {
        // Down
    }
    else if (code == '37') {
       // Left
    }
    else if (code == '39') {
       // Right
    }
}

要获得单元格索引，您可以执行以下操作：

var cell_x = cell.cellIndex
var cell_y = cell.parentElement.rowIndex

使用箭头键作为事件监听器

1 个答案: