“Buat tabel HTML secara dinamis di JavaScript” Kode Jawaban

Buat tabel HTML secara dinamis menggunakan JavaScript

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

Buat tabel HTML secara dinamis di JavaScript

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

Buat tabel HTML secara dinamis di JavaScript

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

Jawaban yang mirip dengan “Buat tabel HTML secara dinamis di JavaScript”

Pertanyaan yang mirip dengan “Buat tabel HTML secara dinamis di JavaScript”

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya