Buen día, quisiera saber si podían ayudarme con este problema, tengo un código en javaScript
con el cual, al darle unos inputs
, me genera una tabla de cuotas.
El problema es que a veces, los plazos son en años y la forma de pago es semanal, y se generaran muchas cuotas, y la pagina al cargar se hace muy larga. Quisiera saber si se puede hacer que esa tabla tenga un largo máximo y se le pueda poner una barra scroll para ir bajando dentro de esa tabla y ver todas las cuotas. Estoy usando bootstrap
para el código html
.
Aquí les pongo los códigos.
La parte de la tabla, está en la función de generar tabla de javascript
al final. Gracias.
function cargardiaDepago(valor) {
if (valor == 1) {
document.querySelector('#input_dia_pago').innerHTML = cargarSelectSemanas();
} else if (valor == 2) {
} else if (valor == 3) {
document.querySelector('#input_dia_pago').innerHTML = cargarSelectDiasMes();
} else if (valor == 4) {
document.querySelector('#input_dia_pago').innerHTML = cargarSelectDiasMes();
} else if (valor == 5) {
document.querySelector('#input_dia_pago').innerHTML = cargarSelectDiasMes();
}
}
function cargarSelectSemanas() {
var select_dia_pago =
"<label for='diapago'>Elija un dia de pago</label><select name='diapago' id='diapago' class='form-control' required><option value='0'>Elige un día de pago</option><option value='1'>Lunes</option><option value='2'>Martes</option><option value='3'>Miércoles</option><option value='4'>Jueves</option><option value='5'>Viernes</option></select> ";
return select_dia_pago;
}
function cargarSelectDiasMes() {
var select_dia_mes =
"<label for='diapago'>Elija un dia del mes para pagar</label><input class='form-control' type='number' name='diapago' id='diapago' placeholder='Escribe un día del mes' value='1' min='1' max='31' step='1'required> ";
return select_dia_mes;
}
const mes_especial = [];
const vector_mensual = [];
function guardar_mes_especial() {
var inputmes = document.getElementById('mesEspecial');
var ms = inputmes.options[inputmes.selectedIndex].text;
var vs = document.getElementById('vectorMensual').value;
if (ms != 'Elige un mes' && vs != 1) {
mes_especial.push(ms);
vector_mensual.push(vs);
}
document.querySelector('#mesespecial').innerHTML = generarTablaMesesEspeciales(mes_especial, vector_mensual);
document.ready = document.getElementById('mesEspecial').value = '13';
document.ready = document.getElementById('vectorMensual').value = '1';
}
function generarTablaMesesEspeciales(mes_especial, vector_mensual) {
var tabla1 =
"<table id='tablita1' class='table'> <thead class='thead-light'> <tr><th scope='col'>Mes</th><th scope='col'>Vector mensual</th></tr></thead>";
tabla1 += '<tbody>';
for (var i = 0; i < mes_especial.length; i++) {
tabla1 += '<tr><td>' + mes_especial[i] + '</td><td>' + vector_mensual[i] + '</td></tr>';
}
tabla1 += '</tbody>';
tabla1 += '</table>';
return tabla1;
}
function calcularCuotas() {
var plazo1 = document.getElementById('plazo').value;
var plazo = parseInt(plazo1);
var unidad = $('input[type=radio][name=inlineRadioOptions]:checked').val();
var fpg = document.getElementById('formapago');
var formapago = fpg.options[fpg.selectedIndex].text;
if (formapago == 'Semanal') {
var dp = document.getElementById('diapago');
var diapago = dp.options[dp.selectedIndex].text;
} else if (formapago == 'Quincenal') {
diapago = 0;
} else {
var diapago = document.getElementById('diapago').value;
}
var fp1 = document.getElementById('fechaPrimeraCuota').value;
var fp = String(fp1);
var diap = fp.slice(8, 10);
var mesp = fp.slice(5, 7) - 1;
var aniop = fp.slice(0, 4);
var dia = parseInt(diap);
var mes = parseInt(mesp);
var anio = parseInt(aniop);
var fecha_primera_cuota = new Date(anio, mes, dia);
if (unidad == 1) {
mes = mes + plazo;
var fecha_ultimo_dia = new Date(anio, mes, dia);
} else {
anio = anio + plazo;
var fecha_ultimo_dia = new Date(anio, mes, dia);
}
var cuotas;
switch (formapago) {
case 'Semanal':
var dias_totales;
dias_totales = (fecha_ultimo_dia.getTime() - fecha_primera_cuota.getTime()) / (1000 * 60 * 60 * 24);
cuotas = dias_totales / 7;
break;
case 'Quincenal':
dias_totales = (fecha_ultimo_dia.getTime() - fecha_primera_cuota.getTime()) / (1000 * 60 * 60 * 24);
cuotas = dias_totales / 15;
break;
case 'Mensual':
if (unidad == 1) {
cuotas = plazo;
} else {
cuotas = plazo * 12;
}
break;
case 'Bimestral':
if (unidad == 1) {
cuotas = plazo / 2;
} else {
cuotas = plazo * 6;
}
break;
case 'Trimestral':
if (unidad == 1) {
cuotas = plazo / 3;
} else {
cuotas = plazo * 4;
}
break;
}
cuotas = Math.ceil(cuotas);
document.ready = document.getElementById('cuotas').value = cuotas;
document.ready = document.getElementById('tasadiaria').value = calcularTasaDiaria();
}
function calcularTasaDiaria() {
var tasa = document.getElementById('tasaanual').value;
var tasaanual = parseInt(tasa);
var tasa_diaria = tasaanual / 360;
return tasa_diaria;
}
function calcular() {
var cuotas = document.getElementById('cuotas').value;
var fpg = document.getElementById('formapago');
var formapago = fpg.options[fpg.selectedIndex].text;
if (formapago == 'Semanal') {
var dp = document.getElementById('diapago');
var diapago = dp.options[dp.selectedIndex].text;
} else if (formapago == 'Quincenal') {
diapago = 0;
} else {
var diapago = document.getElementById('diapago').value;
}
var fd = document.getElementById('fechaDesembolso').value;
var diad = fd.slice(8, 10);
var mesd = fd.slice(5, 7) - 1;
var aniod = fd.slice(0, 4);
var dia = parseInt(diad);
var mes = parseInt(mesd);
var anio = parseInt(aniod);
var fecha_desembolso = new Date(anio, mes, dia);
var fp1 = document.getElementById('fechaPrimeraCuota').value;
var fp = String(fp1);
var diap = fp.slice(8, 10);
var mesp = fp.slice(5, 7) - 1;
var aniop = fp.slice(0, 4);
var dia = parseInt(diap);
var mes = parseInt(mesp);
var anio = parseInt(aniop);
var fecha_primera_cuota = new Date(anio, mes, dia);
var f_d = fecha_desembolso;
var fechac = new Date();
const dias_semana = [ 'Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sabado' ];
const meses = [
'Enero',
'Febrero',
'Marzo',
'Abril',
'Mayo',
'Junio',
'Julio',
'Agosto',
'Septiembre',
'Octubre',
'Noviembre',
'Diciembre'
];
var fechas_cuotas = [];
fechas_cuotas.push(fecha_primera_cuota);
var i = 0;
switch (formapago) {
case 'Semanal':
// este codigo funciona solo si el dia de desembolso es el mismo dia que eligen para pagar
if (diapago == dias_semana[fecha_primera_cuota.getDay()]) {
while (i < cuotas) {
dia = dia + 7;
fechac = new Date(anio, mes, dia);
fechas_cuotas.push(fechac);
i++;
}
} else {
while (diapago != dias_semana[fecha_primera_cuota.getDay()]) {
dia = dia + 1;
fecha_primera_cuota = new Date(anio, mes, dia);
}
while (i < cuotas) {
fechac = new Date(anio, mes, dia);
dia = dia + 7;
fechas_cuotas.push(fechac);
i++;
}
}
break;
case 'Quincenal':
while (i < cuotas) {
dia = dia + 15;
fechac = new Date(anio, mes, dia);
fechas_cuotas.push(fechac);
i++;
}
break;
case 'Mensual':
var diac;
diac = diapago;
while (i < cuotas) {
mes = mes + 1;
fechac = new Date(anio, mes, diac);
fechas_cuotas.push(fechac);
i++;
}
break;
case 'Bimestral':
var diac;
diac = diapago;
while (i < cuotas) {
mes = mes + 2;
fechac = new Date(anio, mes, diac);
fechas_cuotas.push(fechac);
i++;
}
break;
case 'Trimestral':
var diac;
diac = diapago;
while (i < cuotas) {
mes = mes + 3;
fechac = new Date(anio, mes, diac);
fechas_cuotas.push(fechac);
i++;
}
break;
}
var vector_por_cuota = [];
var fechas_de_cuota = [];
for (var i = 0; i < fechas_cuotas.length; i++) {
var dateCuota = fechas_cuotas[i].getDay();
var nombrediaCuota = dias_semana[dateCuota];
var diaCuota = fechas_cuotas[i].getDate();
var mesCuota = fechas_cuotas[i].getMonth();
var nombremesCuota = meses[mesCuota];
var index = mes_especial.indexOf(nombremesCuota);
if (index == -1) {
vector_por_cuota[i] = 1;
} else {
vector_por_cuota[i] = vector_mensual[index];
}
var anioCuota = fechas_cuotas[i].getFullYear();
fechas_de_cuota[i] = nombrediaCuota + ' ' + diaCuota + ' de ' + nombremesCuota + ' del ' + anioCuota;
}
var dias_diferencia = [];
var dias_diferencia_acumulado = [];
var x = 1;
dias_diferencia[0] = (fechas_cuotas[0].getTime() - f_d.getTime()) / (1000 * 60 * 60 * 24);
dias_diferencia_acumulado[0] = dias_diferencia[0];
while (x < cuotas) {
dias_diferencia[x] = (fechas_cuotas[x].getTime() - fechas_cuotas[x - 1].getTime()) / (1000 * 60 * 60 * 24);
dias_diferencia_acumulado[x] = dias_diferencia_acumulado[x - 1] + dias_diferencia[x];
x++;
}
document.querySelector('#resultado').innerHTML = generarTabla(
cuotas,
fechas_de_cuota,
dias_diferencia,
dias_diferencia_acumulado,
vector_por_cuota
);
}
function generarTabla(cuotas, fechas_de_cuota, dias_diferencia, dias_diferencia_acumulado, vector_por_cuota) {
var tabla =
"<table id='tablita' class='table' style:'margin: 0 auto;'> <thead class='thead-light'> <tr><th scope='col'>Cuota</th><th scope='col'>Fecha de Cuota</th><th scope='col'>Dias de diferencia</th><th scope='col'>Dias de diferencia acumulado</th><th scope='col'>Vector Mensual</th></tr></thead>";
tabla += '<tbody>';
var a = 1;
for (var i = 0; i < cuotas; i++) {
tabla +=
'<tr><td>' +
a +
'</td><td>' +
fechas_de_cuota[i] +
'</td><td>' +
dias_diferencia[i] +
'</td><td>' +
dias_diferencia_acumulado[i] +
'</td><td>' +
vector_por_cuota[i] +
'</td></tr>';
a++;
}
tabla += '</tbody>';
tabla += '</table>';
return tabla;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fechas</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<header>
<h1 class="display-1 text-center bg-light text-dark">Cuotas</h1>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-1"></div>
<div class="col-10">
<div class="form-group">
<label for="plazo">Plazo</label>
<input class="form-control" type="number" name="plazo" id="plazo" placeholder="Introduce el plazo" min="1" max="20" step="1" required>
<label for="unidad" id="unidad">Unidad: </label>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1" checked> Meses
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2"> Años
</label>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="formapago">Forma de Pago</label>
<select name="formapago" id="formapago" class="form-control" onchange="cargardiaDepago(this.value);" required>
<option value="0">Elige una opcion</option>
<option value='1'>Semanal</option>
<option value='2'>Quincenal</option>
<option value='3'>Mensual</option>
<option value='4'>Bimestral</option>
<option value="5">Trimestral</option>
</select>
</div>
<div class="form-group col-md-6" id="input_dia_pago">
</div>
</div>
<div class="form-group">
<label for="tasaanual">Tasa anual%</label>
<input type="number" name="tasaanual" id="tasaanual" class="form-control">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="fechaDesembolso">Fecha de desembolso</label>
<input type="date" name="fechaDesembolso" id="fechaDesembolso" class="form-control" required>
</div>
<div class="form-group col-md-6">
<label for="fechaPrimeraCuota">Fecha de 1° cuota</label>
<input type="date" name="fechaPrimeraCuota" id="fechaPrimeraCuota" class="form-control" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="mesEspecial">Meses especiales</label>
<select name="mesEspecial" id="mesEspecial" class="form-control">
<option value="13">Elige un mes</option>
<option value='0'>Enero</option>
<option value='1'>Febrero</option>
<option value='2'>Marzo</option>
<option value='3'>Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="vectorMensual">Vector del mes</label>
<input class="form-control" type="number" name="vectorMensual" id="vectorMensual" placeholder="Introduce el vector" value="1" min="0" max="10" step="0.25" required>
</div>
<div class="form-group col-md-4" >
<label for="guardar"> </label>
<br>
<button name="guardar" class="btn btn-light" id="guardar" onclick="guardar_mes_especial()">Guardar</button>
</div>
</div>
<div class="form-group text-center">
<div id="mesespecial"></div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<button name="calcularcuotas" class="btn btn-primary"
id="calcularcuotas" onclick="calcularCuotas()">Calcular Cuotas</button></div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<div class="form-group">
<label for="cuotas">Cantidad de cuotas</label>
<input readonly type="text" name="cuotas" class="form-control" id="cuotas" placeholder="Cuotas" required>
</div>
<div class="form-group">
<label for="tasadiaria">Tasa Diaria</label>
<input readonly type="text" name="tasadiaria" class="form-control" id="tasadiaria" placeholder="Tasa Diaria" required>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<button name="enviar" class="btn btn-primary"
id="enviar" onclick="calcular()">Calcular</button></div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<div class="form-group">
<div id="resultado"></div>
</div>
</div>
</div>
</main>
</body>
</html>