Table hours JavaScript

Question

Table hours JavaScript

Navigation

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

1

I have a problem generating the hours in a JavaScript table, I use a for to add the hours in pairs but I do not add anything, the same number is repeated again and again, and another problem would be like writing the days of the week in the top row of the table.

This is how I want to develop the table, but I do not know if I am developing the table well to be able to do this.

function genera_tabla() {
	
  var body = document.getElementsByTagName("body")[0];
  var tabla = document.createElement("table");
  var tblBody = document.createElement("tbody");
	
  for (var i = 0; i < 4; i++) {
    var hilera = document.createElement("tr");
	
 var a;		
 // Imprime las horas. 
 for (a = 0; a < 8; a = a+2){
	hilera.textContent = a;
 }
		
    for (var j = 0; j < 4; j++) {
      let elmt = (j == 0 || i == 0) ? "th" : "td";
      var celda = document.createElement(elmt);
      var textoCelda = "fila " + i + ", columna " + j + "\n";
      celda.textContent = textoCelda;
      hilera.appendChild(celda);
    }

    tblBody.appendChild(hilera);
  }

  tabla.appendChild(tblBody);

  body.appendChild(tabla);

  tabla.setAttribute("border", "2");
}

<html>
	
<input type="button" value="Genera una tabla" onclick="genera_tabla()">
	
</html>

javascript html

asked by InThaHouse 13.10.2018 в 20:07

source

2 answers

1

The problem is in the for where you print the time, I replace it with a variable called hour that initialized it in 9 and is outside the first for , then I add it two (2) as you build each row like this:

function genera_tabla() {
	
  var body = document.getElementsByTagName("body")[0];
  var tabla = document.createElement("table");
  var tblBody = document.createElement("tbody");
	
  var hora = 9;
  for (var i = 0; i < 4; i++) {
    var hilera = document.createElement("tr");
		
    for (var j = 0; j < 4; j++) {
      let elmt = (j == 0 || i == 0) ? "th" : "td";
      var celda = document.createElement(elmt);
      if(i > 0 && j == 0){
        var proximaHora = (hora + 2);
        var textoCelda = hora+":00 - "+proximaHora+":00";
        hora = proximaHora;
      }else{
        var textoCelda = "fila " + i + ", columna " + j + "\n";
      }
      celda.textContent = textoCelda;
      hilera.appendChild(celda);
    }

    tblBody.appendChild(hilera);
  }

  tabla.appendChild(tblBody);

  body.appendChild(tabla);

  tabla.setAttribute("border", "2");
}

<input type="button" value="Genera una tabla" onclick="genera_tabla()">

I hope it's what you're looking for

answered by 13.10.2018 в 20:39

Send stored procedure result of the controller to the view Obtain repositories of a GitHub user with Javascript

score 2 · Accepted Answer

I see that there is already an answer. As I already did, I also put my answer

var diasDeLaSemena = ["", "Lunes","Martes","Miercoles","Jueves", "viernes"]
var entreHorras = ["","9:00 - 11:00","11:00 - 13:00","13:00 - 15:00"];



function genera_tabla() {
	
  var body = document.getElementsByTagName("body")[0];
  var tabla = document.createElement("table");
  var tblBody = document.createElement("tbody");
  
  var hilera = document.createElement("tr");
   for (var j = 0; j < 6; j++) {   
     textoCelda = diasDeLaSemena[j];
     var celda = document.createElement("th");
     celda.textContent = textoCelda;
     hilera.appendChild(celda);
   }
 tblBody.appendChild(hilera);
	
  for (var i = 1; i < 4; i++) {
    var elmt,textoCelda;
    var hilera = document.createElement("tr");
    for (var j = 0; j < 6; j++) {
       if(j==0){elmt = "th";
       textoCelda = entreHorras[i];
       }else{elmt = "td";
            textoCelda = ""}
       var celda = document.createElement(elmt);
      
      celda.textContent = textoCelda;
      hilera.appendChild(celda);
    }

    tblBody.appendChild(hilera);
  }

  tabla.appendChild(tblBody);

  body.appendChild(tabla);

  tabla.setAttribute("border", "2");
}

<input type="button" value="Genera una tabla" onclick="genera_tabla()">