如何动态创建 TypeScript 表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32541765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically create a TypeScript table
提问by Joshua Purdy
Typescript doesnt seem to accept the standard syntax for creating a javascript table, so what is the appropriate method? I was unable to find documentation concrning tables in TypeScript.
Typescript 似乎不接受创建 javascript 表的标准语法，那么合适的方法是什么？我无法在 TypeScript 中找到有关表格的文档。
This is what I would expect to work:
这就是我期望的工作：
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";
That is a direct paste from W3schools javascript, however visual studio reports an error at table.insertRow();
这是来自 W3schools javascript 的直接粘贴，但是 Visual Studio 在 table.insertRow(); 处报告错误；
"Property 'insertRow' does not exist on type 'HTMLElement'"
“'HTMLElement' 类型不存在属性 'insertRow'”
The same error ocors using this code:
使用此代码出现相同的错误：
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";
}
}
Should I use appendChildren with a new HTMLElement, representing a row to be added to the header?
我应该将 appendChildren 与一个新的 HTMLElement 一起使用，代表要添加到标题的行吗？
回答by Nikos Paraskevopoulos
Try:
尝试：
var table: HTMLTableElement = <HTMLTableElement> document.getElementById("myTable");
var row = table.insertRow(0);
The reason is that Typescript does not know the exact type of document.getElementById(), just that it returns a generic HTMLElement. You know it is a table, so you can cast it.
原因是 Typescript 不知道 的确切类型document.getElementById()，只是它返回一个泛型HTMLElement. 你知道它是一张桌子，所以你可以投射它。
回答by Joshua Purdy
After looking at Nikos response, this code ended up solving the issue. Typescript table, created dynamicall, from code only
在查看 Nikos 的回复后，这段代码最终解决了这个问题。打字稿表，动态创建，仅从代码
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";
}
}
