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.

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();

"Property 'insertRow' does not exist on type 'HTMLElement'"

The same error occurs 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?

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.

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();

"Property 'insertRow' does not exist on type 'HTMLElement'"

The same error occurs 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?

• javascript
• typescript
• html-table

• It looks like TypeScript doesn't have a HTMLTableBodyElement. Is this correct? ie this casting of tbody: HTMLElement will flag attributes like 'rows' as not existing. – Turtles Are Cute Commented Mar 29, 2017 at 12:42

2 Answers 2

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.

After looking at Nikos response, this code ended up solving the issue. Typescript table, created dynamicall, from code only

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