Good day, I would like to know if you could help me with this problem, I have a code in javaScript
which, by giving it a few inputs
, it generates a quota table.
The problem is that sometimes, the terms are in years and the form of payment is weekly, and many installments will be generated, and the page when loading becomes very long. I would like to know if that table can be made to have a maximum length and a scroll bar can be added to scroll down within that table and see all the odds. I am using bootstrap
for code html
.
Here I put the codes.
The table part is in the generate table function at javascript
the end. Thanks.
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>
Muy Buenas! Se puede hacer perfectamente lo que quieres, lo único que tienes que hacer es meter la tabla dentro de un
<div>
por ejemplo y a ese le tienes que dar un tamaño fijo. Algo así:Si nos referimos a tu código, y concretamente a la función de
js
que genera la tabla seria algo así:IMPORTANTE: Ten en cuenta que aquí te hago un
return
de un objeto y no de código directamente así que para que te lo imprima bien utilizaappendChild();
: Por ejemplo digamos que quieres imprimir tu tabla en el body:document.body.appendchild(generarTabla(..., ..., ..., ..., ...))
Si no te gusta, siempre puedes modificar la funión para que te haga un
return
de código directamente.var tabla = "<div style='height:200px;overflow:auto'><table id='tablita'...
Espero que te sirva mi respuesta.