javascript - 如何动态创建 TypeScript 表

Question

Typescript 似乎不接受创建 javascript 表的标准语法，那么合适的方法是什么？我无法在 TypeScript 中找到有关表的文档。

这是我期望的工作:

    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。你知道它是一张 table ，所以你可以转换它。