¿Cómo calcular dinámicamente el total de cada columna en una tabla en una página HTML?

Básicamente tendré una tabla con los días de la semana (fila de encabezado). Columna 1-domingo , columna 2-lunes , etc. Cada celda se ingresará con horas trabajadas, es decir, 8 . La última fila Quiero que cada celda calcule dinámicamente el total de las celdas que están encima de ella en su columna, luego de ingresar los datos en cada celda. Idealmente, esto debería calcularse después de mover el cursor a una celda diferente.

Parece que debería usar algo de JavaScript para esto. Pero no puedo escribir JavaScript desde cero; Solo puedo ajustarlo a lo que necesito después de que haya sido escrito.

Para nuestros propósitos aquí hay una tabla básica. Pondré ejemplos en la Columna 1 .

 
sundaymondaytuesdaywednesdaythursdayfridaysaturday
8
8
8
8
8
(Calculate 40 here)

Olvide mencionar. Cada celda hará que el usuario ingrese las horas de cada día, por lo que habrá campos de entrada en cada celda.

Si jQuery es una opción viable para usted, puede recorrer todas las td en una columna determinada como esta:

 $('#workweek>tbody>tr>td:nth-child(1)').each( function(){ sum += parseInt($(this).text()) || 0; }); 

He creado un ejemplo de trabajo para usted en jsFiddle :

 for (var i=1; i<8; i++) { var sum = 0; // iteration through all td's in the column $('#workweek>tbody>tr>td:nth-child(' + i + ')').each( function(){ sum += parseInt($(this).text()) || 0; }); // set total in last cell of the column $('#workweek>tbody>tr>td:nth-child(' + i + ')').last().html(sum); } 

Tenga en cuenta que este ejemplo borrará el contenido de la última celda de la columna si no está vacío.

Puede recorrer el DOM de la tabla y obtener textContent o innerText de cada celda como el valor en horas.

Esta es una forma popular de hacerlo:

 function strip(html) { var tmp = document.createElement("DIV"); tmp.innerHTML = html; return tmp.textContent||tmp.innerText; } 

Entonces (algo como esto): Ejemplo de trabajo: http://jsfiddle.net/7srJf/3/

 var tbl = document.getElementById('my-table'); var rows = tbl.rows; var DAYS_OF_WEEK = 2, totals = [0, 0]; for (var i = 0; i < DAYS_OF_WEEK; i++) { for (var j = 1; j < rows.length; j++) { var cell = rows[j].cells[i]; var numHours = parseInt(strip(cell.innerHTML), 10); totals[i] += numHours; } } 
Intereting Posts