<style>
    .anualtable{
        display:none ;
    }
</style>

<script>
      // Obtiene el elemento del interruptor (switch)
  var switchElement = document.getElementById('username');

  // Obtiene los elementos .mensualtable y .anualtable
  var mensualTable = document.querySelector('.mensualtable');
  var anualTable = document.querySelector('.anualtable');

  // Escucha el evento de cambio en el interruptor
  switchElement.addEventListener('change', function() {
    // Si el interruptor está activado, muestra la tabla anual y oculta la tabla mensual
    if (switchElement.checked) {
      anualTable.style.display = 'block';
      mensualTable.style.display = 'none';
    } else {
      // Si el interruptor está desactivado, muestra la tabla mensual y oculta la tabla anual
      anualTable.style.display = 'none';
      mensualTable.style.display = 'block';
    }
  });
</script>