如何动态创建 TypeScript 表答案

【问题标题】：How to dynamically create a TypeScript table如何动态创建 TypeScript 表
【发布时间】：2021-08-21 01:16:53
【问题描述】：

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 一起使用，表示要添加到标题的行？

【问题讨论】：

看起来 TypeScript 没有 HTMLTableBodyElement。这个对吗？即 tbody: HTMLElement 的这种转换会将诸如“行”之类的属性标记为不存在。

标签： javascript typescript html-table

【解决方案1】：

试试：

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

原因是 Typescript 不知道document.getElementById() 的确切类型，只是它返回了一个通用的HTMLElement。你知道它是一张桌子，所以你可以投射它。

【讨论】：

我刚刚发布了我的代码，抱歉我之前没有这样做。我将结果分配给 HTMLTableElement 变量，因此强制转换应该是隐式的。我仍然得到那个错误。
查看了我的代码，并意识到我的问题仍然是猫。还有一个 HTMLTableRowElement 类型，它允许对单元格进行操作。
您不需要从row.insertCell() 转换返回值，因为 typescript 知道这始终是一个 HTMLTableRowElement。换句话说，只有 document.getElementById() 的类型不明确。

【解决方案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";
  }
}

【讨论】：