I am trying to create a table using javascript inside typescript but I am getting error:
[ts] Property 'insertRow' does not exist on type 'HTMLInputElement'.
any
My code which is generating a table is like this:
createTable(chart){
var table = document.createElement("TABLE");
var row,header,cell1, cell2;
var data = chart.options.data;
table.style.border = "1px solid #000";
header = table.createTHead();
row = header.insertRow(0);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell1.style.border = "1px solid #000";
cell2.style.border = "1px solid #000";
cell1.innerHTML = "<b>X-Value</b>";
cell2.innerHTML = "<b>Y-Value</b>";
for(var i = 0; i < data.length; i++){
for(var j = 0; j< data[i].dataPoints.length; j++){
row = table.insertRow(1);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell1.style.border = "1px solid #000";
cell2.style.border = "1px solid #000";
cell1.innerHTML = data[i].dataPoints[j].x;
cell2.innerHTML = data[i].dataPoints[j].y;
}
}
document.getElementById("chartContainer").appendChild(table);
}
I am getting errors for two properties createTHead() and insertRow() I followed few answers in stackoverflow I used this:
(document.createElement("TABLE")) as HTMLInputElement;
(table.createTHead()) as HTMLBodyElement;
(table.createTHead()) as HTMLInputElement;
I tried these following things I don't know why I am getting this error:
Answer to my solution was very simple I need to assign what type of element my table is. So answer to my problem is:
createTable(chart){
var table = document.createElement("TABLE") as HTMLTableElement;
var row,header,cell1, cell2;
var data = chart.options.data;
table.style.border = "1px solid #000";
header = table.createTHead();
row = header.insertRow(0);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell1.style.border = "1px solid #000";
cell2.style.border = "1px solid #000";
cell1.innerHTML = "<b>X-Value</b>";
cell2.innerHTML = "<b>Y-Value</b>";
for(var i = 0; i < data.length; i++){
for(var j = 0; j< data[i].dataPoints.length; j++){
row = table.insertRow(1);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell1.style.border = "1px solid #000";
cell2.style.border = "1px solid #000";
cell1.innerHTML = data[i].dataPoints[j].x;
cell2.innerHTML = data[i].dataPoints[j].y;
}
}
document.getElementById("chartContainer").appendChild(table);
}
So I added HTMLTableElement and this was the solution to my problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.