1

Buen dia. Estoy tratando de sumar el puntaje de las siguientes columnas : Equipo Rojo,Equipo Amarillo y Equipo Turqueza y mostrar en los label correspondiente al cargar la pagina. Tabla

La data se obtiene desde una base de datos en MYSQL y se muestra en la Pagina en JSP. Este es mi codigo en JSP.

 <div class="table-responsive-vertical">
     <div id="Contadores">
         <label>Puntaje Rojo</label>
         <label>0</label>
         <label>Puntaje Amarillo</label>
         <label>0</label>
         <label>Puntaje Turqueza</label>
         <label>0</label>

     </div>
        <table class="table table-bordered table-striped table-hover table-mc-light-blue">
            <thead>
                <tr>
                    <th>Disciplina</th>
                    <th>Categoria</th>
                    <th>Genero</th>
                    <th style="background-color: red">Equipo Rojo</th>
                    <th style="background-color: yellow">Equipo Amarillo</th>
                    <th style="background-color: turquoise">Puntaje Turqueza</th>
                </tr>
            </thead>
            <tbody>
                <%
                for (int i=0; i < v.size();i++){
                    puntaje p = (puntaje)v.elementAt(i);

                %>
                <tr>
                    <td data-title="Disciplina"><%=p.getNombredeporte()%></td>
                    <td data-title="Categoria"><%=p.getCategoria() %></td>
                    <td data-title="Genero"><%=p.getGenero() %></td>
                    <td data-title="Puntaje"><%=p.getPuntajer() %></td>
                    <td data-title="Puntaje"><%=p.getPuntajea() %></td>
                    <td data-title="Puntaje"><%=p.getPuntajet() %></td>
                </tr>
               <%
               }
               %>
            </tbody>
        </table>
    </div>

estoy tratando de realizar con una funcion en javascript y que el resultado se muestre al cargar la pagina. gracias.

0

1 respuesta 1

2

Para resolverlo necesitas 3 variables para guardar los totales de cada equipo:

var rojo=0;
var amarillo=0;
var turqueza=0;

Luego puedes agregarle un id a cada label en el que mostraras los totales.

<label id="projo">0</label>

Luego puedes obtener los datos de las celdas con getElementsByTagName('td'), como los puntajes ocupan los lugares 4, 5 y 6 de cada fila, entonces debes recorrerlos y sumarlos con esa lógica.

Por ultimo asignas los totales con textContent.

De esa forma el código queda funcionando de la siguiente forma:

  var rojo=0;
  var amarillo=0;
  var turqueza=0;
  
  function sumar() {
    elementos=document.getElementsByTagName('td');
    for (var i = 0; i < elementos.length; i +=6) {
      rojo+=+elementos[i+3].textContent;
      amarillo+=+elementos[i+4].textContent;
      turqueza+=+elementos[i+5].textContent;
    }
    document.getElementById('projo').textContent=rojo;
    document.getElementById('pamarillo').textContent=amarillo;
    document.getElementById('pturqueza').textContent=turqueza;
  }
  
  sumar();
<div class="table-responsive-vertical">
     <div id="Contadores">
         <label>Puntaje Rojo</label>
         <label id="projo">0</label>
         <label>Puntaje Amarillo</label>
         <label id="pamarillo">0</label>
         <label>Puntaje Turqueza</label>
         <label id="pturqueza">0</label>

     </div>
        <table class="table table-bordered table-striped table-hover table-mc-light-blue">
            <thead>
                <tr>
                    <th>Disciplina</th>
                    <th>Categoria</th>
                    <th>Genero</th>
                    <th style="background-color: red">Equipo Rojo</th>
                    <th style="background-color: yellow">Equipo Amarillo</th>
                    <th style="background-color: turquoise">Puntaje Turqueza</th>
                </tr>
            </thead>
            <tbody>
                <!-- <%
                for (int i=0; i < v.size();i++){
                    puntaje p = (puntaje)v.elementAt(i);

                %> -->
                <tr>
                    <td data-title="Disciplina">Futbol</td>
                    <td data-title="Categoria">CAT 3</td>
                    <td data-title="Genero">V</td>
                    <td data-title="Puntaje">30</td>
                    <td data-title="Puntaje">20</td>
                    <td data-title="Puntaje">20</td>
                </tr>
                <tr>
                    <td data-title="Disciplina">Futbol</td>
                    <td data-title="Categoria">CAT 4</td>
                    <td data-title="Genero">V</td>
                    <td data-title="Puntaje">30</td>
                    <td data-title="Puntaje">20</td>
                    <td data-title="Puntaje">10</td>
                </tr>
                <tr>
                    <td data-title="Disciplina">Futbol</td>
                    <td data-title="Categoria">CAT 3</td>
                    <td data-title="Genero">D</td>
                    <td data-title="Puntaje">10</td>
                    <td data-title="Puntaje">20</td>
                    <td data-title="Puntaje">20</td>
                </tr>
               <!-- <%
               }
               %> -->
            </tbody>
        </table>
    </div>

Este es solo un ejemplo, luego puedes descomentar el código jsp y funcionará igual.

Espero sea lo que buscas, saludos.

4
  • 1
    gracias,me sirvio saludos cordiales.
    – kenny
    Commented el 3 oct. 2019 a las 13:23
  • hola estimado se probo este codigo,todo va bien pero la suma que muestra en la web no es igual que tengo en la base de datos sabes,si sumo lo que tengo en la base de datos es distinto con lo que esta en la web
    – kenny
    Commented el 8 nov. 2019 a las 16:29
  • @kenny cual es la que da la suma correcta? Commented el 9 nov. 2019 a las 14:13
  • 1
    estimado ya resolvi el tema muchas gracias por tu tiempo brindado,solo te comento que la funcion si esta bien realizada y se ejecuta al 100%
    – kenny
    Commented el 10 nov. 2019 a las 3:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.