0

Con el siguiente código estoy sumando los valores de cada fila en la última celda...

.head, .number, .sub, .dom {
  -webkit-appearance: none;
  border: 0px;
  background-color: transparent;
  text-align: center;
  width: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container" style="padding: 50px;">
	<table class="table table-bordered table-hover">
		<thead>
			<tr>
				<th>Documento</th>
				<th>Nombre</th>
				<th>
					<input class="head" value="Sab">
				</th>
				<th>
					<input class="head" value="Dom">
				</th>
				<th>
					<input class="head" value="Lun">
				</th>
				<th>
					<input class="head" value="Mar">
				</th>
				<th>
					<input class="head" value="Mier">
				</th>
				<th>
					<input class="head" value="jue">
				</th>
				<th>
					<input class="head" value="Vie">
				</th>
				<th>
					<input class="head" value="Sab">
				</th>
				<th>
					<input class="head" value="Dom">
				</th>
				<th>
					<input class="head" value="Lun">
				</th>
				<th> Suma Domingos </th>
				<th> Total </th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1035656856</td>
				<td>Oscar</td>
				<td>
					<input class="number" value="10">
				</td>
				<td>
					<input class="number" value="20">
				</td>
				<td>
					<input class="number" value="15">
				</td>
				<td>
					<input class="number" value="10">
				</td>
				<td>
					<input class="number" value="12">
				</td>
				<td>
					<input class="number" value="15">
				</td>
				<td>
					<input class="number" value="18">
				</td>
				<td>
					<input class="number" value="20">
				</td>
				<td>
					<input class="number" value="12">
				</td>
				<td>
					<input class="number" value="10">
				</td>
				<td>
					<input class="dom">
				</td>
				<td>
					<input class="sub">
				</td>
			</tr>
			<tr>
				<td>1123548965</td>
				<td>Jhon</td>
				<td>
					<input class="number" value="20">
				</td>
				<td>
					<input class="number" value="20">
				</td>
				<td>
					<input class="number" value="20">
				</td>
				<td>
					<input class="number" value="18">
				</td>
				<td>
					<input class="number" value="12">
				</td>
				<td>
					<input class="number" value="10">
				</td>
				<td>
					<input class="number" value="12">
				</td>
				<td>
					<input class="number" value="12">
				</td>
				<td>
					<input class="number" value="15">
				</td>
				<td>
					<input class="number" value="18">
				</td>
				<td>
					<input class="dom">
				</td>
				<td>
					<input class="sub">
				</td>
			</tr>
			<tr>
				<td>1234567890</td>
				<td>Marcos</td>
				<td>
					<input class="number" value="8">
				</td>
				<td>
					<input class="number" value="6">
				</td>
				<td>
					<input class="number" value="12">
				</td>
				<td>
					<input class="number" value="16">
				</td>
				<td>
					<input class="number" value="20">
				</td>
				<td>
					<input class="number" value="15">
				</td>
				<td>
					<input class="number" value="10">
				</td>
				<td>
					<input class="number" value="10">
				</td>
				<td>
					<input class="number" value="20">
				</td>
				<td>
					<input class="number" value="18">
				</td>
				<td>
					<input class="dom">
				</td>
				<td>
					<input class="sub">
				</td>
			</tr>
      <script>
		$("table tbody tr").each(function() {
			var sub = 0;
			$(this).closest("tr").find(".number").each(function(){
				if(parseFloat($(this).val())) {
					sub += parseFloat($(this).val());
				}
			});
			$(this).closest("tr").find(".sub").val(sub);
		});
      </script>
		</tbody>
	</table>
</div>
</body>
</html>

Cómo puedo sumar sólo los valores según el encabezado?

Por ejemplo: solo los valores de los domingos.

Nota: los días en los encabezados van a ser dinámicos en función del mes actual.

1 respuesta 1

1

Se me ocurre asignar clases a los valores dependiendo el día al que perteneces, y al final hacer lo mismo que hiciste para sacar el total pero con las clases del día específico que necesitas, así:

$("table tbody tr").each(function() {
  var sub = 0;
  var dom = 0;
  $(this).find(".number").each(function(){
    if(parseFloat($(this).val())) {
      sub += parseFloat($(this).val());
    }
  });
  
  $(this).find(".Dom").each(function(){
    if(parseFloat($(this).val())) {
      dom += parseFloat($(this).val());
    }
  });
  
  $(this).closest("tr").find(".sub").val(sub);
  $(this).closest("tr").find(".total_Dom").val(dom);
});
.head, .number, .sub, .total_Dom {
  -webkit-appearance: none;
  border: 0px;
  background-color: transparent;
  text-align: center;
  width: 25px;
}
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container" style="padding: 50px;">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Documento</th>
                <th>Nombre</th>
                <th>
                    <input class="head" value="Sab">
                </th>
                <th>
                    <input class="head" value="Dom">
                </th>
                <th>
                    <input class="head" value="Lun">
                </th>
                <th>
                    <input class="head" value="Mar">
                </th>
                <th>
                    <input class="head" value="Mier">
                </th>
                <th>
                    <input class="head" value="jue">
                </th>
                <th>
                    <input class="head" value="Vie">
                </th>
                <th>
                    <input class="head" value="Sab">
                </th>
                <th>
                    <input class="head" value="Dom">
                </th>
                <th>
                    <input class="head" value="Lun">
                </th>
                <th> Suma Domingos </th>
                <th> Total </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1035656856</td>
                <td>Oscar</td>
                <td>
                    <input class="number Sab" value="10">
                </td>
                <td>
                    <input class="number Dom" value="20">
                </td>
                <td>
                    <input class="number Lun" value="15">
                </td>
                <td>
                    <input class="number Mar" value="10">
                </td>
                <td>
                    <input class="number Mier" value="12">
                </td>
                <td>
                    <input class="number jue" value="15">
                </td>
                <td>
                    <input class="number Vie" value="18">
                </td>
                <td>
                    <input class="number Sab" value="20">
                </td>
                <td>
                    <input class="number Dom" value="12">
                </td>
                <td>
                    <input class="number Lun" value="10">
                </td>
                <td>
                    <input class="total_Dom">
                </td>
                <td>
                    <input class="sub">
                </td>
            </tr>
            <tr>
                <td>1123548965</td>
                <td>Jhon</td>
                <td>
                    <input class="number Sab" value="20">
                </td>
                <td>
                    <input class="number Dom" value="20">
                </td>
                <td>
                    <input class="number Lun" value="20">
                </td>
                <td>
                    <input class="number Mar" value="18">
                </td>
                <td>
                    <input class="number Mier" value="12">
                </td>
                <td>
                    <input class="number jue" value="10">
                </td>
                <td>
                    <input class="number Vie" value="12">
                </td>
                <td>
                    <input class="number Sab" value="12">
                </td>
                <td>
                    <input class="number Dom" value="15">
                </td>
                <td>
                    <input class="number Lun" value="18">
                </td>
                <td>
                    <input class="total_Dom">
                </td>
                <td>
                    <input class="sub">
                </td>
            </tr>
            <tr>
                <td>1234567890</td>
                <td>Marcos</td>
                <td>
                    <input class="number Sab" value="8">
                </td>
                <td>
                    <input class="number Dom" value="6">
                </td>
                <td>
                    <input class="number Lun" value="12">
                </td>
                <td>
                    <input class="number Mar" value="16">
                </td>
                <td>
                    <input class="number Mier" value="20">
                </td>
                <td>
                    <input class="number jue" value="15">
                </td>
                <td>
                    <input class="number Vie" value="10">
                </td>
                <td>
                    <input class="number Sab" value="10">
                </td>
                <td>
                    <input class="number Dom" value="20">
                </td>
                <td>
                    <input class="number Lun" value="18">
                </td>
                <td>
                    <input class="total_Dom">
                </td>
                <td>
                    <input class="sub">
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

3
  • Sería perfecto... pero tendría que generar los class de manera dinámica, lo cual complica un poco el código pero lo voy a intentar. Gracias!
    – DjCrazy
    Commented el 6 nov. 2018 a las 21:42
  • @YESIDDOTNET pero los tr los generas desde un ciclo no? si lo haces asi es fácil Commented el 6 nov. 2018 a las 21:49
  • 1
    Es correcto. Con tu sugerencia es suficiente para la prueba que estaba realizando, me dio pistas para avanzar... El proyecto real va un poquito mas allá. Voy a seguir intentando. Gracias por el apoyo!!!
    – DjCrazy
    Commented el 7 nov. 2018 a las 12:54

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.