xxxxxxxxxx
var arraydata = [
['Code', 'Library', 'Price'],
['1101', 'Pandas', '$15,000'],
['2202', 'Nampy', '$10,000'],
['3303', 'MatplotLib', '$13,000'],
['4404', 'SciPy', '$14,000']
]; // load html table from array
function CreateHtmlTable(arrdata){
var table = document.createElement('table');
table.setAttribute('id','tbl');
arrdata.forEach(function(rowdata, i) {
var tr = table.insertRow(); //Create a new row : uses tbody unlike just appendChild
rowdata.forEach((celldata, j) => {
var td = tr.insertCell();
td.innerText = celldata; // add data to <tr> node
});
});
//document.body.appendChild(table); // create the main table node on the document
return table;
}
//create table call
var table=CreateHtmlTable(arraydata);
document.body.appendChild( table );
xxxxxxxxxx
function generate_table() {
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
// creating all cells
for (var i = 0; i < 2; i++) {
// creates a table row
var row = document.createElement("tr");
for (var j = 0; j < 2; j++) {
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var cell = document.createElement("td");
var cellText = document.createTextNode("cell in row "+i+", column "+j);
cell.appendChild(cellText);
row.appendChild(cell);
}
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
}
xxxxxxxxxx
var objdata = new Array();
objdata = [{ID:1, Make:'Toyota', Model:'Fortuner 2.8 GD6', Year:2022, Price:467200},
{ID:2, Make:'Toyota', Model:'Hilux 2.8 GD6' , Year:2023, Price:582000},
{ID:3, Make:'Isuzu' , Model:'D-Max 2.4 6-Auto', Year:2020, Price:275000}];
//create html table from array data : keyvalue pair object array
function CreateHtmlTable(arrdata){
var table = document.createElement("table");
table.setAttribute('id','tbl');
var tabeHeaderRow = table.insertRow();
tabeHeaderRow.innerHTML="<tr><th>"+ Object.keys(arrdata[0]).join("</th><th>") + "</th></tr>";
arrdata.forEach((rowdata, i) => {
var tablerow = table.insertRow(); //Create a new row : uses tbody unlike just appendChild
tablerow.innerHTML="<tr><td>"+ Object.values(rowdata).join("</td><td>") + "</td></tr>";
});
//document.body.appendChild(table);
return table;
}
//create table call
var table=CreateHtmlTable(objdata);
document.body.appendChild( table );