<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#miTabla tbody td {text-align:right;}
#miTabla tbody td:nth-child(1) {text-align:left;}
#miTabla th,#miTabla td {padding:1px 10px;border:1px solid #aaa;}
</style>
</head>
<body>
<h2>Calcular valores de una tabla</h2>
<table id="miTabla">
<thead>
<tr>
<th>Producto</th>
<th>Cantidad</th>
<th>Importe</th>
<th> Total </th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=3>Total</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>producto A</td>
<td>2</td>
<td>12.25</td>
<td></td>
</tr>
<tr>
<td>producto B</td>
<td>1</td>
<td>7.10</td>
<td></td>
</tr>
<tr>
<td>producto C</td>
<td>3</td>
<td>2.20</td>
<td></td>
</tr>
</tbody>
</table>
<p>
<button>Calcular</button>
</p>
<script>
// generamos el evento para el boton
document.getElementsByTagName("button")[0].addEventListener("click",calcular);
/**
* funcion que realiza los calculos
*/
function calcular() { // obtenemos todas las filas del tbody
var filas=document.querySelectorAll("#miTabla tbody tr");
var total=0;
// recorremos cada una de las filas
filas.forEach(function(e) {
// obtenemos las columnas de cada fila
var columnas=e.querySelectorAll("td");
// obtenemos los valores de la cantidad y importe
var cantidad=parseFloat(columnas[1].textContent);
var importe=parseFloat(columnas[2].textContent);
// mostramos el total por fila
columnas[3].textContent=(cantidad*importe).toFixed(2);
total+=cantidad*importe;
});
// mostramos la suma total
var filas=document.querySelectorAll("#miTabla tfoot tr td"); filas[1].textContent=total.toFixed(2);
}
</script>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: Versión 1 (6)