使用箭头键在网格列的第一个单元格上设置焦点

我正致力于在ag网格的头单元格和体单元格之间实现键盘导航。每个标题都有一个 col-id ,而列中的每个单元格都具有相同的ID。我有一个脚本,它将侦听一个keydown事件,如果 e.key 事件是 ArrowDown 当在一个标题上时,它应该查找 科利德 并搜索关联列中的第一个单元格 科利德 ,然后用 focus() .

我有以下内容,但它只是注销列 科利德 ,并且在键关闭时不获取对下面数据单元的引用

document.addEventListener("keydown", function(e) {
  if(e.key === "ArrowRight") {
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    console.log('header id: ', headerId);
  }
  else if(e.key === "ArrowDown"){
    //get column id on arrowdown
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    console.log('header id: ', headerId);
    //look for first child in first row with same id as header and set focus
    document.querySelector('.ag-cell').focus();
  }
  else if(e.key === "ArrowUp") {
    //store value of grid cell column id
    let cellId = document.activeElement.getAttribute("col-id");
    console.log('header id arrow up: ', cellId);
    //set focus to column header
    document.querySelector('.ag-header-cell[col-id="' + cellId + '"]').focus();
  }
});

当前状态: Link