0

Tengo una función de js que da una salida de texto y necesito que este texto salga en un tabla, que ordene los datos, por ejemplo empleados a hay 10 y cobran 10€ por lo tanto el total es tanto, dejo la función aquí:

function calcularSueldos(a,suA,b,suB,c,suC,d,suD)
{
	var empA=Number(a.value);
	var empB=Number(b.value);
	var empC=Number(c.value);
	var empD=Number(d.value);
	var suelA=Number(suA.value);
	var suelB=Number(suB.value);
	var suelC=Number(suC.value);
	var suelD=Number(suD.value);
	var mensaje;
	if (a.value.length==0)
	{
		alert("Por favor, introuduzca un valor para empleados A");
	}
	else	if (b.value.length==0)
	{
		alert("Por favor, introuduzca un valor para empleados B");
	}
	else	if (c.value.length==0)
	{
		alert("Por favor, introuduzca un valor para empleados C");
	}
	else	if (d.value.length==0)
	{
		alert("Por favor, introuduzca un valor para empleados D");
	}
	else	if (suA.value.length==0)
	{
		alert("Por favor, introuduzca un valor para sueldo A");
	}
	else if (suB.value.length==0)
	{
		alert("Por favor, introuduzca un valor para sueldo B");
	}
	else	if (suC.value.length==0)
	{
		alert("Por favor, introuduzca un valor para sueldo C");
	}
	else	if (suD.value.length==0)
	{
		alert("Por favor, introuduzca un valor para sueldo D");
	}
	else if(!Number.isInteger(empA))
	{
		alert("El número de empleados A no es un número entero.\n"+
		"Por favor introduzca un número válido.");
	}
	else if(!Number.isInteger(empB))
	{
		alert("El número de empleados B no es un número entero.\n"+
		"Por favor introduzca un número válido.");
	}
	else if(!Number.isInteger(empC))
	{
		alert("El número de empleados C no es un número entero.\n"+
		"Por favor introduzca un número válido.");
	}
	else if(!Number.isInteger(empD))
	{
		alert("El número de empleados D no es un número entero.\n"+
		"Por favor introduzca un número válido.");
	}
	else if(suelA<0||empA<0)
	{
		alert("El sueldo de A o su número de empleados son negativos, porfavor vuelva a introducirlo.");
	}
	else if(suelB<0||empB<0)
	{
		alert("El sueldo de B o su número de empleados son negativos, porfavor vuelva a introducirlo.");
	}
	else if(suelC<0||empC<0)
	{
		alert("El sueldo de C o su número de empleados son negativos, porfavor vuelva a introducirlo.");
	}
	else if(suelD<0||empD<0)
	{
		alert("El sueldo de D o su número de empleados son negativos, porfavor vuelva a introducirlo.");
	}
	else
	{
		var totA=empA*suelA;
		var totB=(empB*suelB)*4;
		var totC=(empC*suelC)*4;
		var totD=(empD*suelD)*4;
		var totMes=totA+totB+totC+totD;
		var totAno=totMes*12;
		mensaje="<p>El sueldo de "+empA+ " empledos A a "+suelA+"€ es de: "+totA+"€ el sueldo de empleados B es: "+totB+"€ el sueldo de empleados C es: "+totC+"€ el sueldo de empleados D es: "+totD+"€ el sueldo mensual es: "+totMes+"€ el sueldo total del año es de: "+totAno+"€ </p>";
		document.getElementById("salida").innerHTML=mensaje;
	}
}
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8"/>
	<title>Ejercicio 10</title>
	<script type="text/javascript" src="./js/funciones.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/estilos.css"/>
</head>
<body id="body">
	<div class="titulo" align="center" id="lol">
		<h1>Ejercicio 10</h1>
	</div>
<p>Función que pide una cantidad de artículos y que calcula el descuento segun el número de unidades.</p>
<div class="form">
	<p>
	Introduzca el número de empleados tipo A
	<input type="text" id="a"size="10"/>
	</p>
	<p>
	Introduzca el sueldo de empleados tipo A
	<input type="text" id="suA"size="10"/>
	</p>
	<p>
	Introduzca el número de empleados tipo B
	<input type="text" id="b"size="10"/>
	</p>
	<p>
	Introduzca el sueldo de empleados tipo B
	<input type="text" id="suB"size="10"/>
	</p>
	<p>
	Introduzca el número de empleados tipo C
	<input type="text" id="c"size="10"/>
	</p>
	<p>
	Introduzca el sueldo de empleados tipo C
	<input type="text" id="suC"size="10"/>
	</p>
	<p>
	Introduzca el número de empleados tipo D
	<input type="text" id="d"size="10"/>
	</p>
	<p>
	Introduzca el sueldo de empleados tipo D
	<input type="text" id="suD"size="10"/>
	</p>
</div>
<div align="center" class="center">
	<button type="button" onclick="calcularSueldos(a,suA,b,suB,c,suC,d,suD)">Calcular sueldos</button>
</div>
</p>
</form>
<div id="salida" class="salida"></div>
</body>
</html>

Y necesito que los datos de los sueldos y todo eso salgan ordenados en un tabla creada por el js, es decir que la tabla creada no este desde el html, sino que la imprima el js y que imprima los datos ya dentro de la tabla, no se si se entiende lo que quiero hacer, espero que si. Espero que me puedan ayudar.

2
  • Hola estimado, solo para aclarar, necesitas crear todo tu resultado en js?? puedes ocupar jQuery?? si fuese asi en 1 minuto te tengo creada la respuesta
    – harifo
    el 20 feb. 2020 a las 14:55
  • Qué es lo que has intentado hasta el momento? el 20 feb. 2020 a las 16:20

2 respuestas 2

1

Prueba modificando el siguiente código en tu function:

else
        {
            var totA=empA*suelA;
            var totB=(empB*suelB)*4;
            var totC=(empC*suelC)*4;
            var totD=(empD*suelD)*4;
            var totMes=totA+totB+totC+totD;
            var totAno=totMes*12;

            var refDiv = document.getElementById('salida');
            var contenido="";

            contenido = 
            "<table style='border:solid 1px'>" + 
                "<tr>" + 
                    "<td>Tipo</td>" + 
                    "<td>Cantidad</td>" + 
                    "<td>Sueldo</td>" + 
                    "<td>Total</td>" +
                "</tr>" +
                "<tr>"+
                    "<td>A</td>" +
                    "<td>" + empA + "</td>" +
                    "<td>" + suelA+ "</td>" +
                    "<td>" + totA + "</td>" +
                "</tr>" +
                "<tr>"+
                    "<td>B</td>" +
                    "<td>" + empB + "</td>" +
                    "<td>" + suelB+ "</td>" +
                    "<td>" + totB + "</td>" +
                "</tr>" +
                "<tr>"+
                    "<td>C</td>" +
                    "<td>" + empC + "</td>" +
                    "<td>" + suelC+ "</td>" +
                    "<td>" + totC + "</td>" +
                "</tr>" +
                "<tr>"+
                    "<td>D</td>" +
                    "<td>" + empD + "</td>" +
                    "<td>" + suelD+ "</td>" +
                    "<td>" + totD + "</td>" +
                "</tr>" +
                "<tr>"+
                    "<td></td>" +
                    "<td></td>" +
                    "<td>Total mes:</td>" +
                    "<td>"+ totMes +"</td>" +
                "</tr>" +
                "<tr style='border:solid 1px'>"+
                    "<td></td>" +
                    "<td></td>" +
                    "<td>Total año:</td>" +
                    "<td>"+ totAno +"</td>" +
                "</tr>" +
            "</table>";
            refDiv.innerHTML = contenido;

El update a tu función es para armar la tabla que deseas usando solo javascript pero de una forma no dinámica, en caso deseas que fuese dinámico, por favor, actualiza tu pregunta para poder ayudarte.

2
  • 1
    ¿Porqué debería probar?¿Qué pasa tras ello?¿Podrías indicar cómo esto resuelve el problema? Por favor visita: ¿Cómo escribo una buena respuesta? el 20 feb. 2020 a las 16:21
  • A no entenderse exactamente lo que busca el usuario, puede ser que los input sean dinámicos, etc. Por ello, de momento se da una solución básica utilizando solo javascript como solicitó. Para resolver el problema, el usuario interesado debería testear fácilmente lo que contesté. Es obvio tu pregunta, por qué debería probar, pero te lo respondo, para descartar si es lo que realmente necesita. Igual gracias pot tu feedback, actualizaré la respuesta.
    – hdmq
    el 20 feb. 2020 a las 16:45
0

Te comparto un ejemplo de como puedes hacerlo, te dejo ejemplos de como puedes agregarle CSS a elementos de la tabla, etc... los inputs que tienes los cambié a tipo numero e igualmente en tus validaciones agregué la función isNaN

Creé un arreglo con la información de cada registro y bueno aquí va.

function calcularSueldos(a, suA, b, suB, c, suC, d, suD) {

	var empA = Number(a.value);
	var empB = Number(b.value);
	var empC = Number(c.value);
	var empD = Number(d.value);
	var suelA = Number(suA.value);
	var suelB = Number(suB.value);
	var suelC = Number(suC.value);
	var suelD = Number(suD.value);
	var mensaje;
	if (a.value.length == 0) {
		alert("Por favor, introuduzca un valor para empleados A");
	} else if (b.value.length == 0) {
		alert("Por favor, introuduzca un valor para empleados B");
	} else if (c.value.length == 0) {
		alert("Por favor, introuduzca un valor para empleados C");
	} else if (d.value.length == 0) {
		alert("Por favor, introuduzca un valor para empleados D");
	} else if (suA.value.length == 0) {
		alert("Por favor, introuduzca un valor para sueldo A");
	} else if (suB.value.length == 0) {
		alert("Por favor, introuduzca un valor para sueldo B");
	} else if (suC.value.length == 0) {
		alert("Por favor, introuduzca un valor para sueldo C");
	} else if (suD.value.length == 0) {
		alert("Por favor, introuduzca un valor para sueldo D");
	} else if (isNaN(empA) || !Number.isInteger(empA)) {
		alert("El número de empleados A no es un número entero.\n" +
			"Por favor introduzca un número válido.");
	} else if (isNaN(empB) || !Number.isInteger(empB)) {
		alert("El número de empleados B no es un número entero.\n" +
			"Por favor introduzca un número válido.");
	} else if (isNaN(empC) || !Number.isInteger(empC)) {
		alert("El número de empleados C no es un número entero.\n" +
			"Por favor introduzca un número válido.");
	} else if (isNaN(empD) || !Number.isInteger(empD)) {
		alert("El número de empleados D no es un número entero.\n" +
			"Por favor introduzca un número válido.");
	} else if (suelA < 0 || empA < 0) {
		alert("El sueldo de A o su número de empleados son negativos, porfavor vuelva a introducirlo.");
	} else if (suelB < 0 || empB < 0) {
		alert("El sueldo de B o su número de empleados son negativos, porfavor vuelva a introducirlo.");
	} else if (suelC < 0 || empC < 0) {
		alert("El sueldo de C o su número de empleados son negativos, porfavor vuelva a introducirlo.");
	} else if (suelD < 0 || empD < 0) {
		alert("El sueldo de D o su número de empleados son negativos, porfavor vuelva a introducirlo.");
	} else {
		var totA = empA * suelA;
		var totB = (empB * suelB) * 4;
		var totC = (empC * suelC) * 4;
		var totD = (empD * suelD) * 4;
		var totMes = totA + totB + totC + totD;
		var totAno = totMes * 12;
		mensaje = "<p>El sueldo de " + empA + " empledos A a " + suelA + "€ es de: " + totA
			+ "€<br> El sueldo de " + empB + " empleado(s) B a " + suelB + "€ es: " + totB
			+ "€<br> el sueldo de " + empC + " empleado(s) C a " + suelC + "€ es: " + totC
			+ "€<br> el sueldo de " + empD + " empleado(s) D a " + suelD + "€ es: " + totD
			+ "€<br> el sueldo mensual de todos los empleados es: " + totMes
			+ "€<br> el sueldo anual de todos los empleados es: " + totAno + "€</p>";
		document.getElementById("salida").innerHTML = mensaje;

		var campos = [
			{
				cantidad: empA + ' empledo(s) A',
				salario: suelA + ' €',
				total: totA + ' €'
			},
			{
				cantidad: empB + ' empledo(s) B',
				salario: suelB + ' €',
				total: totB + ' €'
			},
			{
				cantidad: empC + ' empledo(s) C',
				salario: suelC + ' €',
				total: totC + ' €'
			},
			{
				cantidad: empD + ' empledo(s) D',
				salario: suelD + ' €',
				total: totD + ' €'
			}
		]

		createTable(campos, totMes, totAno);
	}
}

function createTable(campos, totMes, totAno) {
	var table = document.createElement('table');
	table.className = 'table table-striped table-hover table-fixed';
	var thead = document.createElement('thead');
	var tbody = document.createElement('tbody');
	var tr = document.createElement('tr');
	var td;

	for (var idx = 0; idx < 3; idx++) {
		var th = document.createElement('th');
		switch (idx) {
			case 0:
				th.innerHTML = 'Empledo(s)';
				th.className = 'text-left';
				break;
			case 1:
				th.innerHTML = 'Salario c/u empledo(s)';
				th.className = 'text-right';
				break;
			case 2:
				th.innerHTML = 'Total salario empleado(s)';
				th.className = 'text-right';
				break;
		}
		tr.appendChild(th);
	}

	thead.appendChild(tr);

	for (var campo of campos) {
		tr = document.createElement('tr');
		for (var idx = 0; idx < 3; idx++) {
			td = document.createElement('td');
			switch (idx) {
				case 0:
					td.innerHTML = campo.cantidad;
					td.className = 'text-left';
					break;
				case 1:
					td.innerHTML = campo.salario;
					td.className = 'text-right';
					break;
				case 2:
					td.innerHTML = campo.total;
					td.className = 'text-right';
					break;
			}
			tr.appendChild(td);
		}
		tbody.appendChild(tr);
	}

	table.appendChild(thead);
	table.appendChild(tbody);

	var div = document.getElementById('container');
	div.appendChild(table);

	var h5 = document.createElement('h5');
	h5.innerHTML = 'Sueldo mensual de todos los empleados ' + totMes + ' €';
	div.appendChild(h5);
	
	h5 = document.createElement('h5');
	h5.innerHTML = 'Sueldo anual de todos los empleados ' + totAno + ' €';
	div.appendChild(h5);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="titulo" align="center" id="lol">
		<h1>Ejercicio 10</h1>
	</div>
<p>Función que pide una cantidad de artículos y que calcula el descuento segun el número de unidades.</p>
<div class="form">
	<p>
	Introduzca el número de empleados tipo A
	<input type="number" id="a"size="10"/>
	</p>
	<p>
	Introduzca el sueldo de empleados tipo A
	<input type="number" id="suA"size="10"/>
	</p>
	<p>
	Introduzca el número de empleados tipo B
	<input type="number" id="b"size="10"/>
	</p>
	<p>
	Introduzca el sueldo de empleados tipo B
	<input type="number" id="suB"size="10"/>
	</p>
	<p>
	Introduzca el número de empleados tipo C
	<input type="number" id="c"size="10"/>
	</p>
	<p>
	Introduzca el sueldo de empleados tipo C
	<input type="number" id="suC"size="10"/>
	</p>
	<p>
	Introduzca el número de empleados tipo D
	<input type="number" id="d"size="10"/>
	</p>
	<p>
	Introduzca el sueldo de empleados tipo D
	<input type="number" id="suD"size="10"/>
	</p>
</div>
<div align="center" class="center">
	<button type="button" onclick="calcularSueldos(a,suA,b,suB,c,suC,d,suD)">Calcular sueldos</button>
</div>
</p>
</form>
<div id="salida" class="salida"></div>
<div class="container" id="container"></div>

Espero haber sido de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.