Angular 將焦點設置為表中的輸入 在組件中使用表對象

Question

我有一個動態填充數據的表。我有多個輸入標簽，我想在用戶按下右箭頭鍵時將輸入的焦點轉移到下一個 td 標簽中的下一個輸入（類似於 ms excel )

我有行和列的索引，並使用@ViewChild 創建了一個表對象，但我無法使用行和列的索引來確定目標 td

Answer 1

您可以使用已有的表ElementRef訪問特定cell (td) 。

@ViewChild('ITable') ITableRef: ElementRef;

focusTD(rowNum, cellNum)
   this.ITableRef.tBodies[0].rows[rowNum].cells[cellNum].focus()
}

ngAfterViewInit() {
  this.focusTD(0,1); // selects the first tr (row) and second td (cell)
}

表元素有tBodies ，我選擇的第一個tBodies假設你的表有一個tBody ，那么你應該選擇一個row (tr)然后就可以選擇特定的cell (td)

Answer 2

關注表的第一個輸入字段=>

focusTD(rowNum, cellNum) this.ITableRef.nativeElement.tBodies[0].rows[rowNum].cells[cellNum].getElementsByTagName('input')[0].focus() }