Fill table with matrix

Navigation
1

I have a matrix, with which I have to fill a table so it looks like this: 

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>
    
asked by hubman 30.03.2018 в 03:56
source

1 answer

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>

Assuming that you do not have more information about the structure and dimensions of your matrix, you could generalize the dynamic creation of the tbody of your table in this way: 

    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);
    
answered by 30.03.2018 / 06:37
source
Get values from a table - jquery - ajax Problem with date format