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

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

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

1 个答案: