是否可以使用 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。是否可以使用 javascript 执行单元格导航，即使每列都没有要标识的 id？

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

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