Archivo de la etiqueta Javascript

tabla

Tabla de horarios con javascript

Está tabla realizada mayormente con javascript puede ser una forma ordenada y fácil para visualizar horarios de diferentes materias cómo utilicé en este ejemplo aunque puedes aplicarlo a un listado de citas por ejemplo reemplazando las materias por nombres de clientes.

Inicialmente creamos un archivo style.css e index.html con la estructura básica del documento, ambos dentro de la misma carpeta. En el index.html importamos nuestro style.css y escribimos dentro del body las etiquetas de la tabla, con su encabezado y su cuerpo.

Contenido del head:

    <title>Tabla semanal de horarios con javascript</title>
    <link rel="stylesheet" type="text/css" href="style.css">

Contenido del body:

 <table>
     <thead>
        <tr id="thead"></tr>
     </thead>
     <tbody id="tbody"></tbody>
 </table>

Estilos para el cuerpo del documento, la tabla, su encabezado y celdas, también definí una clase “days” para los días de la semana.

body {
    min-height: Calc(100vh - 100px);
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}

table {
    margin: auto;
    font-size: 20px;
    width: 80%;
}

td,
th {
    border: 1px solid #c3c3c3;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.days {
    background-color: black;
    color: aliceblue;
    font-family: sans-serif;
    font-weight: 100;
}

También incluí unos estilos al pasar el cursor por cada materia y al pulsar en cada una de ellas.

.bg:hover {
    background: #c1c1c1;
    color: #fff;
}

.shadow:hover {
    box-shadow: 0px 4px 9px -1px rgba(0, 0, 0, 0.75);
    cursor: pointer;
}

.shadow:active {
    background: #000;
    color: #fff;
}

Ahora pasemos al código javascript que yo escribí dentro del html ya que no es muy extenso pero tú puedes escribirlo en un archivo js y luego incluirlo dentro del html.

Definí la tabla mediante una función y le agregué las siguientes propiedades:

  function Table() {

            this.thead = document.getElementById("thead")
            this.tbody = document.getElementById("tbody")
            this.dias = ["Hora", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes"]
            this.horas = ["8:00", "9:00", "10:00", "11:00", "12:00"]
            this.clases = [{
                "hora": "8:00",
                "dia": 1,
                "materia": "Música",
                "bg": "aliceblue"
            }, {
                "hora": "10:00",
                "dia": 1,
                "materia": "Filosofía",
                "bg": "antiquewhite"
            }, {
                "hora": "10:00",
                "dia": 2,
                "materia": "Literatura",
                "bg": "darkgray"
            }, {
                "hora": "8:00",
                "dia": 3,
                "materia": "Dibujo",
                "bg": "cyan"
            }, {
                "hora": "9:00",
                "dia": 3,
                "materia": "Música",
                "bg": "aliceblue"

            }, {
                "hora": "11:00",
                "dia": 3,
                "materia": "Biología",
                "bg": "darkturquoise"
            }, {
                "hora": "8:00",
                "dia": 4,
                "materia": "Música",
                "bg": "aliceblue"
            }, {
                "hora": "10:00",
                "dia": 4,
                "materia": "Sociología",
                "bg": "darksalmon"
            }, {
                "hora": "8:00",
                "dia": 5,
                "materia": "Filosofía",
                "bg": "antiquewhite"
            }, {
                "hora": "9:00",
                "dia": 5,
                "materia": "Literatura",
                "bg": "darkgray"
            }, {
                "hora": "12:00",
                "dia": 5,
                "materia": "Historia",
                "bg": "cornflowerblue"
            }]

Comenzamos construyendo el encabezado de la tabla para ello recorremos el array de los días para crear los casilleros del encabezado, a los días le agregamos nuestra clase “days” definida en el CSS y al elemento con el texto “Hora” le damos un fondo rojo para diferenciarlo de los días.

this.head = function() {
    // texto de "Hora" y los días
    for (d of this.dias) {
        const th = document.createElement("th")

        // Sí no es el texto "Hora" le ponemos la clase "days" de lo contrario el fondo red
        if (d !== "Hora") th.className = "days"
        else th.style.backgroundColor = "red"
        th.appendChild(document.createTextNode(d))
        this.thead.appendChild(th)
    }
}

Ahora pasamos a construir el cuerpo de la tabla, primero definimos una variable “hora” que necesitaremos para guardar la hora en la que nos encontramos en la fila de la tabla y una variable “horasCount” en la que guardamos la cantidad actual de elementos que contiene, es así que iteramos por cada hora para crear las filas.

Ahora el segundo ciclo que incluimos dentro del primero se encargará de insertar la hora de cada materia con su respectivo nombre y en el día que le corresponde.

Si estamos parados en la primer celda de cada fila pondremos en ella el primer elemento del array de horas para luego guardarlo en la variable hora y luego eliminarlo así al volver a la siguiente fila agregamos la siguiente hora eliminándola nuevamente y pasando a la siguiente. A estas celdas le damos un texto en negrita.

Ahora si no estamos parados en la primer celda de la fila que llevará la clase “shadow”. En este punto tenemos que fijarnos si la hora en que estamos parados coincide con alguna de la lista de clases para ello utilizamos la guardada en nuestra variable hora y si ésta y el número de día coincide con nuestro objeto de clases le damos el color de fondo que tiene y le insertamos el nombre de la materia a la celda para luego agregarla a la fila.

this.body = function() {
    let hora
    let horasCount = this.horas.length
        // en el body tenemos que poner las horas con sus respectivas materias
    for (let f = 0; f < horasCount; f++) {
        // fila
        const tr = document.createElement("tr")
            // celdas, for por la cantidad de días de la semana
        for (let c = 0; c < 6; c++) {
            const td = document.createElement("td")
            if (c == 0) {
                // celdas de las horas tomamos la primera y después la eliminamos así tomamos la siguiente
                td.appendChild(document.createTextNode(this.horas[c]))
                td.style.fontWeight = "bold"
                hora = this.horas[c]
                this.horas.shift()
            } else {
                // celdas de las materias
                td.className = "shadow"
                this.clases.forEach(function(element) {
                    if (element.hora === hora && element.dia === c) {
                        td.style.backgroundColor = element.bg
                        td.appendChild(document.createTextNode(element.materia))
                    }
                })
            }
            tr.appendChild(td)
        }
        this.tbody.appendChild(tr)
    }
}

Finalmente para ver la tabla armada creamos la instancia de la clase Tabla e invocamos a la construcción de su encabezado primero y luego a la de su cuerpo con la información que le proporcionamos.

let table = new Table()
table.head()
table.body()

Video del tutorial

VER DEMO Código en GitHub