Mi Consulta es la siguiente.
Estoy desarrollando un sistema web, donde creo una tabla en html y deseo sumar la cantidad de datos ingresados en una columna y se muestre el total de la suma en un texbox, todo esto del lado del cliente. De antemano les agradezco la ayuda que me puedan brindar
Saludos
Hola,
Del lado del cliente, sin recargar ni volver al servidor, puedes recorrer las celdas de la columna con JavaScript puro y sumar sus valores. Suponiendo que tu tabla tiene una clase o id, y que la columna a sumar es siempre la misma posición en cada fila:
<table id="miTabla">
<tr><td>10</td><td>Producto A</td></tr>
<tr><td>25</td><td>Producto B</td></tr>
<tr><td>7</td><td>Producto C</td></tr>
</table>
<input type="text" id="total" readonly>
<script>
const filas = document.querySelectorAll('#miTabla tr');
let suma = 0;
filas.forEach(function (fila) {
const primeraCelda = fila.querySelector('td:first-child');
if (primeraCelda) {
suma += parseFloat(primeraCelda.textContent) || 0;
}
});
document.getElementById('total').value = suma;
</script>
querySelectorAll('#miTabla tr') recoge todas las filas de la tabla, y por cada una se coge la primera celda (td:first-child) con querySelector. parseFloat convierte el texto de la celda a número, y el || 0 es un pequeño seguro por si alguna celda estuviera vacía o con texto no numérico, para que no te convierta la suma entera en NaN.
Si necesitas que el total se recalcule automáticamente cada vez que el usuario edita algún valor (por ejemplo si las celdas son input en vez de texto estático), envuelve ese mismo código en una función y llámala en el evento input de cada campo editable, en vez de calcularlo solo una vez al cargar la página.
Sergio