时间戳

首页 > 解决方案 > 添加并显示表中列总和的结果

javascript - 添加并显示表中列总和的结果

问题描述

再会。我是这方面的初学者，我有一个包含以下记录的表格，我想添加红队、黄队和绿松石设备列，并在表格顶部的标签中显示总和

为此，我将我的 html 代码附加到 jsp 和参考图像 分数表中

<div class="tabs-body">
                        <div class="tabs-item" id="tab1">
                               <div class="container"> 
                                    <div class="con-contador">
                 <label>Puntaje Rojo :</label>
                 <label id="projo" class="contador"></label>
                 <label >Puntaje Amarillo :</label>
                 <label id="pamarillo" class="contador"></label>
                 <label>Puntaje Turqueza :</label>
                 <label id="pturqueza" class="contador"></label>
                 
                 <a href="reportes.jsp" target="_blank" class="btnreporte">Reporte</a>
              
                  
             </div>
                                   <div class="table-responsive-vertical"  >
                <table id="reporte" 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.getPuntaje1() %></td>
                            <td data-title="Puntaje"><%=p.getPuntaje2() %></td>
                            <td data-title="Puntaje"><%=p.getPuntaje3() %></td>
                        </tr>
                       <%
                       }
                       %>
                    </tbody>
                </table>
            </div>
            </div>
                        </div>
                      
                    </div>

我知道可以使用 javascript 中的函数来完成，但我仍然是新手，我请求您的支持。

标签： javascript

解决方案

Firstly I'd say that JSP is Java Server Pages, not javascript. JSP code gets run (for example, generating puntaje sums) on the server before the webpage is returned to the web browser. In contrast, javascript code is executed after the webpage is returned to the web browser. Since you already have JSP code, why not just run your code server-side? Perhaps another "for" loop that runs to generate sums before your elements. That said, if you really want to use javascript then the general procedure will be: add another data-attribute to your points TDs, like 

<td data-puntaje-rojo=<%=p.getPuntaje1() %>>

Add classed spans to your labels like:

<label>Puntaje Rojo : <span class="puntaje-sum-rojo"></span></label>

Then in your javascript, use some form of selector to iterate over a collection/array of the TDs and store the sum of all data-puntaje-rojo values. Then, use javascript or jquery to inject the appropriate sum value into the appropriate label span.
While best practice is to store your javascript code in an external file on your web server website location, you can also write javascript directly inside of your JSP page, the javascript code must be inside tags. And, it's best to have your javascript code run after your HTML is fully loaded: javascript and jquery both provide ways to accomplish that.

推荐阅读