How to dynamically create a TypeScript table

Question

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?

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
– Turtles Are Cute, Commented Mar 29, 2017 at 12:42

Nikos Paraskevopoulos · Accepted Answer · 2017-11-24 11:09:59Z

11

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.

edited Nov 24, 2017 at 11:09

answered Sep 12, 2015 at 17:38

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joshua Purdy Over a year ago

I just posted my code, sorry I hadn't done that previously. I am assigning the result to an HTMLTableElement variable, so the cast should be implicit. I still get that error though.

Joshua Purdy Over a year ago

Looked over my code more, and realized that my problem was still catsing. There is an HTMLTableRowElement type as well, which allows for cell manipulation.

Dave E Over a year ago

You don't need to cast the return from row.insertCell() because typescript knows that this is always an HTMLTableRowElement. Put another way, it's only document.getElementById() that has an ambiguous type.

Joshua Purdy · Accepted Answer · 2015-09-12 18:03:30Z

5

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

answered Sep 12, 2015 at 18:03

Joshua Purdy

1071 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to dynamically create a TypeScript table

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related