是否可以使用 javascript 在表格单元格之间进行上下导航？

Question

<div class="flex-row" *ngFor="let item of model.balanceSheet.intermediateAssets; let i = index;">
      <div class="flex-cell w-2 border border-no-bottom border-no-top border-no-left"> {{item.description | stringShorten:48}} </div>
      <div class="flex-cell border border-no-left calculated" *ngFor="let value of item.wacValues"> {{value.value | wacNumber}} </div>
      <div class="flex-cell border border-no-left" style="padding:1px 2px 1px 1px;">
        <input type="number" [disabled]="syncing" style="border:none;" [(ngModel)]="item.eliminationAdjustment" [ngModelOptions]="{standalone: true}" name="eliminationadjustment + i" (change)="syncIntermediateAssets()" />
      </div>
      <div class="flex-cell border border-no-left calculated"> {{item.consolidatedStatement | wacNumber:true}} </div>
    </div>

我试图在单击键盘上的向上向下箭头时在 angular6 中执行单元格导航。但问题是表格是使用 flex 类设计的，而不是使用 tr 和 td。是否可以使用执行单元格导航即使每列都没有要识别的 id，也可以使用 javascript？

Answer 1

如果您的代码中有类似 colsInRow 的变量，您可以执行以下操作：

columnElement.addEventListener('mouseup', (event) => {
    let parent = event.target.parentNode; // get parent element
    let currentIndex = Array.prototype.indexOf.call(parent.children, event.target); // get index of current element

    parent.children[currentIndex + colsInRow].focus();
})

如果您不这样做，我建议您添加它，因为它会使这成为可能并且相当容易。