JavaScript - colorear un td de un calendario con javascript

 
Vista:
sin imagen de perfil
Val: 13
Ha aumentado su posición en 8 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

colorear un td de un calendario con javascript

Publicado por david (5 intervenciones) el 21/03/2021 09:52:00
hola llevo un año que deje javascript cuando apenas había empezado, javascript pudo con migo, pero quiero seguir intentándolo y no rendirme. Este es mi problema tengo un calendario en html y quiero que se dibuje la celda del día X (día en el que nos encontremos), he usado un objeto Date() para el día, tengo las celdas con un getElementsByTagName() un for que recorre las celdas utilizo textContent para sacar el contenido de las celdas y convierto la fecha en string para con un if compara el contenido de las celdas con la fecha en texto y ahí me quedo, he intentado varias cosas pero sin éxito, podéis decirme en donde me estoy equivocando gracias.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>calendario</title>
    </head>
    <body>
        <table id="tablaCalendario" width="30%">
            <caption>Calendario Basico</caption>
            <thead>
            <tr>
              <th>lunes</th><th>martes</th><th>miercoles</th>
              <th>jueves</th><th>viernes</th><th>sabado</th><th>domingo</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td>
                <td>5</td><td>6</td><td>7</td>
              </tr>
              <tr>
                <td>8</td>
                <td>9</td><td>10</td><td>11</td><td>12</td>
                <td>13</td><td>14</td>
              </tr>
              <tr>
                <td>15</td><td>16</td>
                <td>17</td><td>18</td><td>19</td><td>20</td>
                <td>21</td>
              </tr>
              <tr>
                <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td>
                <td>28</td><td>29</td>
              </tr>
              <tr>
                <td>30</td><td>31</td>
              </tr>
            </tbody>
          </table>
          <script type="text/javascript">
          var dia, textodia, tabla, celda, recorre, texto;
 
          dia =new Date();
          textodia =dia.getDate();
            console.log(textodia);
 
          tabla =document.getElementById('tablaCalendario');
          celda =tabla.getElementsByTagName('td');
          console.log(celda);
 
          for(recorre=0; recorre<celda.length;recorre++){
              texto =celda[recorre].textContent;
              console.log(texto);
              if(texto <=textodia.toString()){
 
 
 
              }else{
 
              }
          }
          </script>
    </body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 13
Ha aumentado su posición en 8 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

colorear un td de un calendario con javascript

Publicado por david (5 intervenciones) el 21/03/2021 12:45:15
Hola de nuevo leí mi mensaje y o lo mejor no me he expresado bien lo que quiero es usar la propiedad style para colorear la celda del día en el que nos encontremos, pero no se como procesar la variable texto que guarda el contenido de las celdas (td) con la variable textodia que guarda el día de hoy. no pido que me hagáis un codigo entero ni nada parecido solo que me indiquéis donde me he equivocado y como puedo arreglarlo.
gracias un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

colorear un td de un calendario con javascript

Publicado por joel (895 intervenciones) el 21/03/2021 13:36:48
Hola David, siguiendo un poco tu código, simplemente tienes que recorrer las celdas y comparar con dia de hoy... te he modificado tu código para que funcione...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>calendario</title>
    </head>
    <body>
        <table id="tablaCalendario" width="30%">
            <caption>Calendario Basico</caption>
            <thead>
            <tr>
              <th>lunes</th><th>martes</th><th>miercoles</th>
              <th>jueves</th><th>viernes</th><th>sabado</th><th>domingo</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td>
                <td>5</td><td>6</td><td>7</td>
              </tr>
              <tr>
                <td>8</td>
                <td>9</td><td>10</td><td>11</td><td>12</td>
                <td>13</td><td>14</td>
              </tr>
              <tr>
                <td>15</td><td>16</td>
                <td>17</td><td>18</td><td>19</td><td>20</td>
                <td>21</td>
              </tr>
              <tr>
                <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td>
                <td>28</td><td>29</td>
              </tr>
              <tr>
                <td>30</td><td>31</td>
              </tr>
            </tbody>
          </table>
          <script type="text/javascript">
          var dia, textodia, tabla, celda, recorre, texto;
 
          dia =new Date();
          textodia =dia.getDate();
          console.log(textodia);
 
          tabla =document.getElementById('tablaCalendario');
          celda =tabla.getElementsByTagName('td');
          console.log(celda);
 
          [...celda].forEach(td => {
              if (td.innerText == textodia.toString()) {
                  td.style.backgroundColor="Red";
              }
          });
          </script>
    </body>
</html>


getElementsByTagName devuelve un HTMLCollection y con [...HTMLCollection] lo pasamos a array para poder hacer el forEach

si te queda alguna duda...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 13
Ha aumentado su posición en 8 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

colorear un td de un calendario con javascript

Publicado por david (5 intervenciones) el 21/03/2021 16:33:09
Gracias Joel, ahora si funciona, voy a buscar la iteración forEach () para saber mas de esta iteración. de verdad muchas gracias.
Un fuerte saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar