1

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>

1 respuesta 1

4

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í:

td {
    border: 1px royalblue dotted;
    width: 100px;
    height: 50px;
    text-align: center;
    font-weight: bold;
}

#taula {
    height: 200px !important;
    overflow: auto;
    width: 220px;
}
<div id="taula">
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
        </tr>
        <tr>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>15</td>
            <td>16</td>
        </tr>
        <tr>
            <td>17</td>
            <td>18</td>
        </tr>
        <tr>
            <td>19</td>
            <td>20</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
        </tr>
        <tr>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>25</td>
            <td>26</td>
        </tr>
        <tr>
            <td>27</td>
            <td>28</td>
        </tr>
        <tr>
            <td>29</td>
            <td>30</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
        </tr>
        <tr>
            <td>33</td>
            <td>34</td>
        </tr>
    </table>
</div>

Si nos referimos a tu código, y concretamente a la función de js que genera la tabla seria algo así:

function generarTabla(cuotas, fechas_de_cuota, dias_diferencia, dias_diferencia_acumulado, vector_por_cuota) {
    var tamanoFijo = document.createElement("div");
    tamanoFijo.style.height = "300px"; //Aqui realmente podrias poner el tamaño que tu desees
    tamanoFijo.style.overflow = "auto";
    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></div>';
    tamanoFijo.innerHTML = tabla;
    return tamanoFijo;
}

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 utiliza appendChild();: 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.

2
  • Me sirvio mucho, solo use la parte del archivo css, y le deje el alto de un tamaño fijo y el ancho en auto. Además me sirvio para poder alinear el texto, ya que me habia olvidado como se hacia, pero como se puede alinear en forma vertical? Commented el 1 mar. 2019 a las 15:23
  • 1
    Si que existen varias maneras con css. Podrían ser: vertical-align: middle; o transform: translateY(-50%); Commented el 3 mar. 2019 a las 16:49

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.