1

Quiero obtener una tabla como el de la imagen, pero los titulos EFR y EFA no se acomodan bien, y como obtener la ultima fila con un poco de espacio?

Tambien quisiera mejorar el codigo, es mucho codigo para una simple tabla

introducir la descripción de la imagen aquí

var table = document.createElement('table');
table.class = "display";
table.id = "example";
var thead = document.createElement('thead');
var tr = document.createElement('tr');
var th1 = document.createElement('th');
var th2 = document.createElement('th');
var th3 = document.createElement('th');

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');

  var elLink = document.createTextNode('datos');
  var elLink2 = document.createTextNode('datos');
  td11.appendChild(elLink);
  td12.appendChild(elLink2);
  tr.appendChild(td11);
  tr.appendChild(td12);

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

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

2 respuestas 2

3

Solo sería necesario añadir algunos atributos para que coincida con la imagen, por ejemplo el colspan=2 a su segundo y tercer th y el border a la tabla con setAttribute

th2.setAttribute('colspan', '2');

El margen no es posible ya que para un tr no es aplicable como lo dicen en la documentación , podría hacer algo no sé si sea lo más adecuado (sin css) pero se me ocurre añadir tr vacías para simular el espacio cuando llegue al final es decir que indice sea igual a 4 , está claro que su código se puede mejorar pero solo tomé referencia su avance para dar solución

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');

  var elLink = document.createTextNode('datos');
  var elLink2 = document.createTextNode('datos');
  td11.appendChild(elLink);
  td12.appendChild(elLink2);
  tr.appendChild(td11);
  tr.appendChild(td12);

  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>

2

En lo personal no soy muy fanatico de crear etiquetas con document.createElement, se me hace mas facil crear una cadena html para incluir cualquier etiqueta y modificarlo con la propiedad innerHTML.

Por Ejemplo

	var html="<table border=1>";
	html+="<thead>";
	html+="<tr>";
	html+="<th> usuario </th>";
	html+="<th colspan=2;> EFA </th>";
	html+="<th colspan=2;> EFR </th> </tr></thead>";
    html+="<tbody>";
    for(i=0;i<4;i++){
    	html+="<tr><td>hola</td><td>datos1</td><td>datos2</td><td>datos3</td><td>datos4</td></tr>";
    }
    html+="</tbody>";
    html+="</table>";
	document.getElementById("tabla").innerHTML=html;
<html>
<head>
	<title></title>
</head>
<body>

<div id="tabla"></div>
<script type="text/javascript">
//aqui el script
</script>
</body>
</html>

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.