0

necesito que me puedan orientar. El título de la pregunta es algo confuso, pero lo explicaré de inmediato. Tengo una tabla html que contiene 8 columnas:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<body>
  <table class="table table-bordered table-sm">
     <thead>
        <tr>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>31-08-2019</th>
          <th>01-09-2019</th>
          <th>02-09-2019</th>
          <th>03-09-2019</th>
          <th>04-09-2019</th>
          <th>05-09-2019</th>
        </tr>
     </thead>
     <tbody>
        <tr>
          <td>Gonzalo</td>
          <td>Jeria</td>
          <td>TRABAJO</td>
          <td>TRABAJO</td>
          <td>TRABAJO</td>
          <td>TRABAJO</td>
          <td>TRABAJO</td>
          <td>DESCANSO</td>
        </tr>
        <tr>
          <td>Marcelo</td>
          <td>Reyes</td>
          <td>DESCANSO</td>
          <td>DESCANSO</td>
          <td>DESCANSO</td>
          <td>DESCANSO</td>
          <td>TRABAJO</td>
          <td>TRABAJO</td>
        </tr>
        <tr>
          <td>Julio</td>
          <td>Soto</td>
          <td>VACACIONES</td>
          <td>VACACIONES</td>
          <td>VACACIONES</td>
          <td>VACACIONES</td>
          <td>VACACIONES</td>
          <td>VACACIONES</td>
        </tr>
     </tbody>
  </table>
</body>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Como puedo utilizar jquery o javascript, para que me oculte las columnas de fechas anteriores(con algún botón), y me resalte la fecha del día de hoy, por ej:(03-09-2019), y que esto se vaya realizando día tras día, para evitar demasiadas columnas. Me explico, "que jquery busque la fecha actual día tras día, pero que exista un botón para poder mostrar/ocultar las fechas pasadas."

1 respuesta 1

0

Necesitas agregar una clase a cada columna para poder ocultarlas. Te dejo un ejemplo con la primera columna:

$("#ocultar").click(function() {
$('table th').each(function(i, th) {
  var from = th.innerHTML.split("-")
  var f = new Date(from[2], from[1] - 1, from[0])
  var today = new Date();
  today.setHours(0,0,0,0)
  if (f < today) {
    var clase = $(th).attr('class');
    $("." + clase).hide();
  } else if( f.getTime() === today.getTime()) {
    $(th).addClass('today');
  }  
});
});
.today {
  background-color: yellow;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<body>
  <table class="table table-bordered table-sm">
     <thead>
        <tr>
          <th>Nombre</th>
          <th>Apellido</th>
          <th class="col1">31-08-2019</th>
          <th>01-09-2019</th>
          <th>02-09-2019</th>
          <th>03-09-2019</th>
          <th>04-09-2019</th>
          <th>05-09-2019</th>
        </tr>
     </thead>
     <tbody>
        <tr>
          <td>Gonzalo</td>
          <td>Jeria</td>
          <td class="col1">TRABAJO</td>
          <td>TRABAJO</td>
          <td>TRABAJO</td>
          <td>TRABAJO</td>
          <td>TRABAJO</td>
          <td>DESCANSO</td>
        </tr>
        <tr>
          <td>Marcelo</td>
          <td>Reyes</td>
          <td class="col1">DESCANSO</td>
          <td>DESCANSO</td>
          <td>DESCANSO</td>
          <td>DESCANSO</td>
          <td>TRABAJO</td>
          <td>TRABAJO</td>
        </tr>
        <tr>
          <td>Julio</td>
          <td>Soto</td>
          <td class="col1">VACACIONES</td>
          <td>VACACIONES</td>
          <td>VACACIONES</td>
          <td>VACACIONES</td>
          <td>VACACIONES</td>
          <td>VACACIONES</td>
        </tr>
     </tbody>
  </table>
</body>
<button id="ocultar">Ocultar</button>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

7
  • Hola alan, gracias por responder.Me sirve lo que hiciste... pero mencioné que me gustaría que exista un botón para mostrar/ocultar las fechas anteriores al 03-09-2019. La verdad no tengo idea como hacer esto.
    – h6gignacio
    Commented el 3 sept. 2019 a las 18:23
  • Es super facil, ya edite mi respuesta.
    – alanfcm
    Commented el 3 sept. 2019 a las 18:25
  • Estoy utilizando tu respuesta, y la verdad esta muy buena, ¿Debo ir agregando a cada columna una clase para poder ocultarlas o Existe la manera automática de ocultar todas las fechas anteriores al día actual, día tras día?
    – h6gignacio
    Commented el 3 sept. 2019 a las 18:34
  • Podrias agregar la misma clase a todas las fechas que sean menores al dia actual.
    – alanfcm
    Commented el 3 sept. 2019 a las 18:37
  • Si, eso es lo que hice.. pero lo que busco es que automáticamente se vayan ocultando las fechas pasadas, respecto al día actual. A modo de ejemplo. si mañana 04-09-2019, la tabla debería resaltar ese día, y se mantengan ocultos las fechas anteriores y obviamente el día pasado que sería hoy
    – h6gignacio
    Commented el 3 sept. 2019 a las 18:40

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.