Valor total en la tabla de formulario HTML del menú de selección

Tengo un formulario HTML simple con una columna que tiene un menú de selección con 2 opciones: Moderado o Alto. Necesito encontrar todas las filas donde la celda = "Moderado" y contar el total de otra celda en la misma fila, y repetir esto para todas las filas donde la celda = "Alto". Aquí hay un JS Fiddle que muestra una tabla completa de muestra:

http://jsfiddle.net/8hn2H/

En este ejemplo, el resultado para Total moderado sería 1.6 y el resultado para Total alto sería 8.7 (es el total del valor en la columna Promedio de horas/semana). El número de filas no se fijará de antemano; podría haber 1 o más.

Aquí está el html real para el formulario:

<div class="span8"><br>
      <table id="activities" class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Activity</th>
            <th>Risk</th>
            <th>Hours/Week</th>
            <th>Weeks/Year</th>
            <th>Average Hours/Week</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input name="Activity"  id="Activity" type="text" value=""/></td>
            <td><div class="controls">
              <select id="Risk">
                <option></option>
                <option>Moderate</option>
                <option>High</option>
              </select>
            </div></td>
            <td><input class="span1" id="A1" type="text" value=""/></td>
            <td><input class="span1" id="B1" type="text" value=""/></td>
            <td><input class="span1" id="C1" type="text" value=""/></td>
            <td><button class="btn">Delete Activity</button></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Total Moderate</td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Total High</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

preguntado el 12 de junio de 12 a las 16:06

Su total para Alto debe ser 8.7 -

Gracias por señalarlo: fue un error tipográfico, lo he editado para corregirlo. -

2 Respuestas

var moderateTotal = 0;
var highTotal = 0;
$("#activities").find("tr").each(function() {
    var tr = $(this);
    var level = tr.find("td:nth-child(2)").html();
    var value = tr.find("td:nth-child(5)").html();

    switch(level)
    {
        case "Moderate":
            moderateTotal += value*1;
        break;
        case "High":
            highTotal += value*1;
        break;
    }
});

$("#activities tr:last td:last").prev().html("High Total: " + highTotal);
$("#activities tr:last").prev().find("td:last").prev().html("Moderate Total: " + moderateTotal);

Yo uso jQuery's .find() y .each() para iterar sobre cada fila. yo suelo find nuevamente para encontrar el nivel y el valor (columnas 2 y 5) y una declaración de cambio para agregar el valor a los totales. necesito hacer value*1 para convertir la cadena en un número entero para que se agregue. El comportamiento predeterminado aquí es concatenar.

Las dos últimas líneas establecen el valor de las celdas de la tabla. Sería mucho más fácil si pudiera darles una identificación específica para que pueda hacer $("moderateTotal").html() pero como no se proporcionó, utilicé algunos selectores de jQuery para hacerlo.

Demo

Respondido el 12 de junio de 12 a las 16:06

Hay varias formas de atacar esto, pero le recomiendo que considere jQuery DataTables. Tiene una funcionalidad integrada para sumar campos, clasificar, filtrar, etc. y es MUCHO más fácil que tener que preparar algo en casa. Además, se ve mucho mejor que una simple mesa con soporte completo de Themeroller.

Aquí hay un ejemplo simple con una devolución de llamada de pie de página para hacer sumas: http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html

Debido a que todos los datos de la tabla están completamente disponibles para usted a través de la API, es fácil hacer cálculos con ellos. Usted --podría-- simplemente filtrar la tabla según el indicador moderado o alto y mostrar solo esos datos, lo que permite al usuario modificar esa vista sobre la marcha.

Y, si sus datos alguna vez son muy largos, tiene opciones de paginación y carga ajax para mejorar la velocidad en el nivel del usuario.

Respondido el 12 de junio de 12 a las 16:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.