如何動態創建TypeScript表

Question

Typescript似乎不接受創建javascript表的標准語法，那么適當的方法是什么？ 我無法在TypeScript中找到文檔concrning表。

這是我期望的工作：

    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";

這是來自W3schools javascript的直接粘貼，但是visual studio在table.insertRow（）;

“類型'HTMLElement'上不存在'屬性'insertRow'”

使用此代碼時出現相同的錯誤：

class ModuleTable {
  table: HTMLTableElement;
  private thead: HTMLElement;
  private tbody: HTMLElement;
  constructor() {
    this.table = document.createElement('table');
    this.thead = this.table.createTHead();
    this.tbody = this.table.createTBody();
    var row = this.thead.insertRow(0);
    var cell = row.insertCell(0);
    cell.innerHTML = "Module ID";
   }
}

我應該將appendChildren與新的HTMLElement一起使用，表示要添加到標題的行嗎？

Answer 1

嘗試：

var table: HTMLTableElement = <HTMLTableElement> document.getElementById("myTable");
var row = table.insertRow(0);

原因是Typescript不知道document.getElementById()的確切類型，只是它返回一個通用的HTMLElement 。 你知道它是一張桌子，所以你可以施展它。

Answer 2

在看了Nikos的回復之后，這段代碼最終解決了這個問題。 Typescript表，僅從代碼創建的dynamicicall

class ModuleTable {
  table: HTMLTableElement;
  private thead: HTMLTableElement;
  private tbody: HTMLTableElement;
  constructor() {
    this.table = document.createElement('table');
    this.thead = <HTMLTableElement> this.table.createTHead();
    this.tbody = <HTMLTableElement> this.table.createTBody();
    var hrow = <HTMLTableRowElement> this.table.tHead.insertRow(0);
    var cell = hrow.insertCell(0);
    cell.innerHTML = "Module ID";
  }
}