create a table dynamically with javascript

Technology

create a table dynamically with javascript

by - leyfemenina on - March 14, 2019

how to create a table automatically with javascript and html



create a table dynamically with javascript
create a table dynamically with javascript





to create a table dynamically, that looks like an array, for an array tour:



<html>
    <head>
        <title>tuto mbaja.com</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
       <input type="button" value="Genera una tabla" onclick="genera_tabla()">
       
       <script>
           
    function genera_tabla() {
          var tamañoi=10;
           var tamañoj=10;
          
 // Get the reference of the body element
  var body = document.getElementsByTagName("body")[0];
 
 // Create a <table> element and a <tbody> element
  var tabla   = document.createElement("table");
  var tblBody = document.createElement("tbody");
 
 // Create the cells
  for (var i = 0; i < tamañoi; i++) {
   // Create the rows of the table
    var hilera = document.createElement("tr");
 
    for (var j = 0; j < tamañoj; j++) {
 // Create a <td> element and a text node, make the node
       // text be the content of <td>, place the <td> element at the end
       // of the row of the table
      var celda = document.createElement("td");
      var textoCelda = document.createTextNode("["+i+","+j+"]");
      celda.appendChild(textoCelda);
      hilera.appendChild(celda);
    }
 
 // add the row to the end of the table (at the end of the tblbo elementdy)
    tblBody.appendChild(hilera);
  }
 
  // position the <tbody> under the <table> element
  tabla.appendChild(tblBody);
  // append <table> into <body>
  body.appendChild(tabla);
  // modify the "border" attribute of the table and set it to "2";
  tabla.setAttribute("border", "2");
}</script>
    </body>
</html>
Tags
Reactions

Post a Comment

0 Comments