html table with javascript

Question

html table with javascript

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I want to get a table like the one in the picture, but the EFR and EFA titles do not fit well, and how to get the last row with a bit of space?

I would also like to improve the code, it is a lot of code for a simple table

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>

javascript html dom html-tabla

asked by hubman 30.03.2018 в 01:29

source

2 answers

2

Personally I'm not a big fan of creating labels with document.createElement , it makes it easier for me to create an html string to include any tag and modify it with the innerHTML property.

For Example

	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>

answered by 30.03.2018 в 01:55

Multitasking queries in MySQL Substring starting at the end

score 3 · Accepted Answer

It would only be necessary to add some attributes to match the image, for example the colspan=2 to its second and third th and the border to the table with setAttribute

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

The margin is not possible since for a tr it is not applicable as they say in the documentation , I could do something I do not know if it is the most appropriate (without css) but it occurs to me to add tr empty to simulate the space when it reaches the end meaning index is equal to 4, it is clear that your code can be improved but I only took reference to its progress to provide a solution

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>