With the following code I am adding the values of each row in the last cell...
.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>
How can I sum only the values according to the header?
For example: only the values for Sundays.
Note: the days in the headers are going to be dynamic based on the current month.
It occurs to me to assign classes to the values depending on the day you belong to, and in the end do the same thing you did to get the total but with the classes of the specific day you need, like this: