如何动态创建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 表，仅通过代码动态创建

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";
  }
}