1

tengo una matriz, con la que debo llenar una tabla para que quede asi:

introducir la descripción de la imagen aquí

var datos = [
  [0, 10],
  [0, 12],
  [15,0]
];


var table = document.createElement('table');
table.class = "display";
table.setAttribute('border', '1');
table.id = "example";
var thead = document.createElement('thead');
var tr = document.createElement('tr');
var th1 = document.createElement('th');
var th2 = document.createElement('th');
th2.setAttribute('colspan', '2');
var th3 = document.createElement('th');
th3.setAttribute('colspan', '2');
var texto1 = document.createTextNode("usuario");
var texto2 = document.createTextNode("EFA");
var texto3 = document.createTextNode("EFR");
th1.appendChild(texto1);
th2.appendChild(texto2);
th3.appendChild(texto3);
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);

thead.appendChild(tr);
table.appendChild(thead);

var tbody = document.createElement('tbody');

for (var indice = 0; indice < 5; indice++) {

  var tr = document.createElement('tr');
  var td = document.createElement('td');
  var texto1 = document.createTextNode('hola');
  td.appendChild(texto1);
  td.className = "info";
  tr.appendChild(td);

  var td = document.createElement('td');
  var td11 = document.createElement('td');
  var td12 = document.createElement('td');

for(let k=0; k<datos.length;k++){
for(let j=0; j<datos[k].length;j++){
var elLink = document.createTextNode(datos[k][j]);
  td11.appendChild(elLink);
  tr.appendChild(td11);
}
  }

  var td = document.createElement('td');
  var td11 = document.createElement('td');
  var td12 = document.createElement('td');

  var elLink = document.createTextNode('datos');
  var elLink2 = document.createTextNode('datos');
  td11.appendChild(elLink);
  td12.appendChild(elLink2);
  tr.appendChild(td11);
  tr.appendChild(td12);
  if (indice === 4) {
    for (var i = 0; i < 4; i++) {
      var tr1 = document.createElement('tr');
      tbody.appendChild(tr1);
    }
  }
  tbody.appendChild(tr);
}

table.appendChild(tbody);
document.getElementById("tabla").appendChild(table);
<div id="tabla"></div>

1 respuesta 1

1

var datos = [
	[0, 10],
	[0, 12],
	[15, 0]
];


var table = document.createElement('table');
table.class = "display";
table.setAttribute('border', '1');
table.id = "example";

var thead = document.createElement('thead');
var tr = document.createElement('tr');
var th1 = document.createElement('th');
var th2 = document.createElement('th');
th2.setAttribute('colspan', '2');
var th3 = document.createElement('th');
th3.setAttribute('colspan', '2');
var texto1 = document.createTextNode("usuario");
var texto2 = document.createTextNode("EFA");
var texto3 = document.createTextNode("EFR");
th1.appendChild(texto1);
th2.appendChild(texto2);
th3.appendChild(texto3);
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);

thead.appendChild(tr);
table.appendChild(thead);

//////

var tbody = document.createElement('tbody');



for (var filasMatriz = 0; filasMatriz < datos.length; filasMatriz++) {
	var tr = document.createElement('tr');
	var td = document.createElement('td');
	var user = document.createTextNode('InfoUser');
	td.appendChild(user);
	tr.appendChild(td);
	for (var colMatriz = 0; colMatriz < datos[filasMatriz].length; colMatriz++) {
		var td = document.createElement('td');
		var dato = document.createTextNode(datos[filasMatriz][colMatriz]);
		td.appendChild(dato);
		tr.appendChild(td);
	}
	for (var colMatriz = 0; colMatriz < datos[filasMatriz].length; colMatriz++) {
		var td = document.createElement('td');
		var info = document.createTextNode("Info para EFR");
		td.appendChild(info);
		tr.appendChild(td);
	}

	tbody.appendChild(tr);
}


var tr = document.createElement('tr');
var total = document.createTextNode('Suma: ');
var td = document.createElement('td').appendChild(total);
tr.appendChild(td);
var suma  = 0;
for(var columna=0; columna < datos[0].length; columna++){
	for(var fila = 0; fila < datos.length; fila++){
		suma += datos[fila][columna];
	}
	var td = document.createElement('td');
	var sumaTotal = document.createTextNode("" + suma);
	td.appendChild(sumaTotal);
	tr.appendChild(td);
	suma = 0;
}



tbody.appendChild(tr);


table.appendChild(tbody);

document.getElementById("tabla").appendChild(table);
<!DOCTYPE html>
 <html>
 <head>
 	
 	<title></title>
 </head>
 <body>
 <div id="tabla"></div>
 </body>
 <script type="text/javascript" src="tablas.js"></script>
 </html>

Suponiendo que no tenés más información sobre la estructura y dimensiones de tu matriz, podrías generalizar la creación dinámica del tbody de tu tabla de esta forma:

    var tbody = document.createElement('tbody');

////Creas tantos tr como filas tengas en tu matríz, y por cada fila, tantos td como columnas tenga tu matriz

    for (var filasMatriz = 0; filasMatriz < datos.length; filasMatriz++) {
     var tr = document.createElement('tr');
     var td = document.createElement('td');
     var user = document.createTextNode('InfoUser');
     td.appendChild(user);
     tr.appendChild(td);
     for (var colMatriz = 0; colMatriz < datos[filasMatriz].length;colMatriz++) {
        var td = document.createElement('td');
        var dato = document.createTextNode(datos[filasMatriz][colMatriz]);
        td.appendChild(dato);
        tr.appendChild(td);
    }
    for (var colMatriz = 0; colMatriz < datos[filasMatriz].length; colMatriz++) {
        var td = document.createElement('td');
        var info = document.createTextNode("Info para EFR");
        td.appendChild(info);
        tr.appendChild(td);
    }

    tbody.appendChild(tr);
}

///Sumar los datos de la matriz y ponerlos en el último 'tr'
var tr = document.createElement('tr');
var total = document.createTextNode('Suma: ');
var td = document.createElement('td').appendChild(total);
tr.appendChild(td);
var suma  = 0;
for(var columna=0; columna < datos[0].length; columna++){
    for(var fila = 0; fila < datos.length; fila++){
        suma += datos[fila][columna];
    }
    var td = document.createElement('td');
    var sumaTotal = document.createTextNode("" + suma);
    td.appendChild(sumaTotal);
    tr.appendChild(td);
    suma = 0;
}



tbody.appendChild(tr);
1
  • puedes crear un ejemplo funcional, con el sniper
    – hubman
    Commented el 30 mar. 2018 a las 4:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.