Generar tabla HTML a partir de JavaScript 2D array

Esta duda se puede abordar de variadas maneras, pero te mostramos la respuesta más completa para nosotros.

Solución:

Aquí hay una función que usará el dom en lugar de string concatenación.

function createTable(tableData) 
  var table = document.createElement('table');
  var tableBody = document.createElement('tbody');

  tableData.forEach(function(rowData) 
    var row = document.createElement('tr');

    rowData.forEach(function(cellData) 
      var cell = document.createElement('td');
      cell.appendChild(document.createTextNode(cellData));
      row.appendChild(cell);
    );

    tableBody.appendChild(row);
  );

  table.appendChild(tableBody);
  document.body.appendChild(table);


createTable([["row 1, cell 1", "row 1, cell 2"], ["row 2, cell 1", "row 2, cell 2"]]);

Esto es bastante fácil de hacer con un bucle for doble.

function makeTableHTML(myArray) 
    var result = "";
    for(var i=0; i";
        
        result += "";
    
    result += "";

    return result;

Otra versión sin innerHTML.

function makeTable(array) 
    var table = document.createElement('table');
    for (var i = 0; i < array.length; i++) 
        var row = document.createElement('tr');
        for (var j = 0; j < array[i].length; j++) 
            var cell = document.createElement('td');
            cell.textContent = array[i][j];
            row.appendChild(cell);
        
        table.appendChild(row);
    
    return table;

Comentarios y calificaciones

Ten en cuenta dar recomendación a esta sección si te ayudó.

---

---

Utiliza Nuestro Buscador