[SOLUCIONADO] Sumar filas y mostrar resultado en columna final

[evair]

Hola buenas noches, ya son las 5 am en santiago, Chile, estuve pensando horas y horas el siguiente problema:

Tengo un sistema donde se muestran las infracciones de vehiculos de acuerdo a su patente y año, en una tabla los encabezados son los años y hacia abajo se muestra el numero de infracción, lo que necesito es sumar los valores de la fila en forma horizontal y mostrar el numero total de infracciones en la ultima columna:

PATENTE | 2011 | 2012 | 2013 | INFRACCIONES

TP031 | 4 | 3 | 6 | [13] -> "TOTAL"
SI0352 | 0 | 3 | 9 | [12]
MP4012 | 0 | 0 | 3 | [3]

Esto debo hacerlo con javascript, ya que desde el servidor no se entrega el número total, debido a que los datos varian en tiempo real.

Código HTML:

<table id="infracciones">
    <tr>
        <th>Patente</th>
        <th>2011</th>
        <th>2012</th>
        <th>2013</th>
        <th>Infracciones</th>
    </tr>
    <tr>
        <td>TP031</td>
        <td>4</td>
        <td>3</td>
        <td>6</td>
        <td></td>
    </tr>
        <td>SI0352</td>
        <td>0</td>
        <td>3</td>
        <td>9</td>
        <td></td>
    </tr>
    </tr>
        <td>MP4012</td>
        <td>0</td>
        <td>0</td>
        <td>3</td>
        <td></td>
    </tr>
</table>
 

¿Como se pueden sumar los datos en forma horizontal para cada fila y escribirlos en la ultima columna?

La verdad es que googleado un monton, funciones de jquery como each, eq, etc... he leido, sin embargo no he logrado implementar nada, ni siquiera he encontrado ejemplos al respecto.

Estaria demasiado agradecido si alguien pudiera ayudarme, la verdad llevo horas en esto y se me hace complicado conseguirlo por mi mismo.

[Alexis88]

Una de las tantas formas en que puede hacer esto, consiste en asignar una clase a cada celda final, de tal modo que recorrerías a todas las filas de la tabla, dentro de estas recorres a sus celdas menos a la celda final identificada con la clase asignada al principio y tan solo tendrías que ir acumulando los valores de las celdas previas para finalmente mostrar el resultado en la celda final.

Código Javascript:

[].forEach.call(document.querySelectorAll("#infracciones tr"), function(tr){
    var suma = 0;
    [].forEach.call(tr.querySelectorAll("td:not(.clase)"), function(td){
        suma += parseInt(td.innerHTML);
    });
    tr.querySelector(".clase").innerHTML = suma;
});
 

Un saludo

[evair]

Agradezco muchisimo tu respuesta, hice lo siguiente en html:

Código HTML:

<table id="infracciones">
    <tr>
        <th>Patente</th>
        <th>2011</th>
        <th>2012</th>
        <th>2013</th>
        <th>Infracciones</th>
    </tr>
    <tr>
        <td>TP031</td>
        <td>4</td>
        <td>3</td>
        <td>6</td>
        <td class="total"></td>
    </tr>
    <tr>
        <td>SI0352</td>
        <td>0</td>
        <td>3</td>
        <td>9</td>
        <td class="total"></td>
    </tr>
    <tr>
        <td>MP4012</td>
        <td>0</td>
        <td>0</td>
        <td>3</td>
        <td class="total"></td>
    </tr>
</table>
 

y en javascript:

Código Javascript:

[].forEach.call(document.querySelectorAll("#infracciones tr"), function(tr){
    var suma = 0;
    [].forEach.call(tr.querySelectorAll("td:not(.total)"), function(td){
        suma += parseInt(td.innerHTML);
    });
    tr.querySelector(".total").innerHTML = suma;
});
 

Sin embargo obtengo un error que es el siguiente:

Código:

Uncaught TypeError: Cannot set property 'innerHTML' of null

Puedes revisar el código aquí: jsfiddle.net/jp1bx3tu/2/

Aún no logro comprender por que lanza el error, por favor si fueras tan amable nuevamente de ayudarme.

[Alexis88]

Hay que corregir dos cosas. La primera de ellas es la primera fila. El algoritmo toma a todas las filas, incluida la primera en la cual no hay elementos <td>. Añade un <thead> y un <tbody>, así definirás a la cabecera y cuerpo de la tabla, para luego recorrer las filas del cuerpo de la tabla. Lo segundo a corregir está en la primera celda de cada fila. Como no es un valor a tomar en cuenta para realizar el cálculo, añádele una clase, de la misma forma que hiciste con la última celda que tampoco es tomada en cuenta para el cálculo; de esta forma, solo se recorrerán a las tres celdas intermedias de cada fila.

Échale un vistazo para que veas cómo queda.

Un saludo

[evair]

Muchisimas gracias por tu tiempo, de verdad, me solucionaste la vida xD bueno como algo extra, estoy intentando acceder al valor de un input de clase notes, por ejemplo hice lo siguiente:

Código Javascript:

[].forEach.call(tr.querySelectorAll("td:not(.node):not(.input):not(.promedio), input#notes"), function(td){
 
console.log(td);
 

Todo va muy bien, el problema es que en el resultado de la consola devuelve:

Código HTML:

(index):35 <td>​6.6​</td>​
(index):35 <td>​6.6​</td>​
(index):35 <input id=&#8203;"notes" type=&#8203;"text" class=&#8203;"form-control">​
(index):35 <td>​6.6​</td>​
(index):35 <td>​6.6​</td>​
(index):35 <td>​6.6​</td>​
(index):35 <input id=&#8203;"notes" type=&#8203;"text" class=&#8203;"form-control">​
(index):35 <td>​1.2​</td>​
(index):35 <td>​1.5​</td>​
(index):35 <td>​6.6​</td>​
(index):35 <input id=&#8203;"notes" type=&#8203;"text" class=&#8203;"form-control">​
 

Devuelve el input entero, y llevo rato intentando acceder a su valor, por favor, es lo ultimo que necesito.

De todas maneras ya con la ayuda anterior, te estoy muy agradecido.

Saludos.

[Alexis88]

Devuelve al elemento porque eso es lo que imprimes. Para acceder al valor de un <input>, debes utilizar la propiedad value del mismo modo en que utilicé la propiedad innerHTML para obtener el valor de cada <td>.

Un saludo

[xfxstudios]

Mira esto que coloque alli, si lo adaptas puede que te sirva:

http://www.forosdelweb.com/f18/calcu...7/#post4761622

[evair]

Iniciado por Alexis88

Devuelve al elemento porque eso es lo que imprimes. Para acceder al valor de un <input>, debes utilizar la propiedad value del mismo modo en que utilicé la propiedad innerHTML para obtener el valor de cada <td>.

Un saludo

Muchisimas gracias!! salió todo tal y como lo necesitaba, te agradezco mucho el tiempo para responderme, pude modificar el script y lograr un resultado genial, gracias a la base que me diste.

[evair]

Iniciado por xfxstudios

Mira esto que coloque alli, si lo adaptas puede que te sirva:

[url]http://www.forosdelweb.com/f18/calcular-promedio-notas-lista-captura-proveniente-consulta-1143147/#post4761622[/url]

Gracias!