Breaking News: Grepper is joining You.com. Read the official announcement!

dynamically create html table in javascript

Add Answer

Simon Chirambira answered on September 29, 2020 Popularity 1/10 Helpfulness 1/10

answer dynamically create html table in javascript

related create a html table dynamically using javascript

related dynamically create html table in javascript

dynamically create html table in javascript

Comment

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

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: html-table javascript

Link to this answer
Share Copy Link

Contributed on Apr 09 2022

Simon Chirambira

0 Answers Avg Quality 2/10

Closely Related Answers

create a html table dynamically using javascript

Comment

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

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: developer.mozilla.org

Tags: html-table h

Link to this answer
Share Copy Link

Contributed on Sep 29 2020

ssbrar

0 Answers Avg Quality 2/10

dynamically create html table in javascript

Comment

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

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: html-table javascript

Link to this answer
Share Copy Link

Contributed on Apr 09 2022

Simon Chirambira

0 Answers Avg Quality 2/10

dynamically create html table in javascript

Contents

More Related Answers

dynamically create html table in javascript

Closely Related Answers

create a html table dynamically using javascript

dynamically create html table in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.