如何使用JavaScript获取GridView列的总和

时间:2014-11-19 13:01:45

标签: javascript jquery asp.net gridview

我正在尝试访问名为Time of the gridview的列,并使用JavaScript计算整列的总和。

我有这样的事情:

enter image description here

所以在报告总计中我想得到5号,因为它现在才进入。

这是gridview的定义:

<div class="total">

    <asp:GridView ID="ReportGrid" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDS" Height="68px" Width="813px" AllowPaging="True">
        <Columns>
            <asp:BoundField DataField="Date" HeaderText="Date" SortExpression="Date" DataFormatString="{0:MM/dd/yy}" />
            <asp:BoundField DataField="Name" HeaderText="Team Member Name" SortExpression="Name" />
            <asp:BoundField DataField="ProjectName" HeaderText="Projects" SortExpression="ProjectName" />
            <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
            <asp:BoundField DataField="Time" HeaderText="Time" SortExpression="Time" />
        </Columns>
    </asp:GridView>
    <br />
    <br />
    <span>Report total: <em>
        <asp:Label runat="server" ID="totalHours" Text="0"></asp:Label></em></span>
</div>

任何人都可以帮我解决这个问题的javaScript代码或者与我分享一些相关的链接,因为我在互联网上找到的所有内容与此不相似,我想当你知道如何做这件事很简单使用JS。

调试期间总和的NaN值:

enter image description here

1 个答案:

答案 0 :(得分:1)

将css类添加到字段

    <asp:BoundField DataField="Time" HeaderText="Time"> 
      <ItemStyle CssClass="yourclass"></ItemStyle> 
     </asp:BoundField> 

并使用以下代码

 var fields= document.getElementsByClassName('yourclass');
    var sum = 0;
    for (var i = 0; i < fields.length; ++i) {
        var item = fields[i];  
         sum += parseInt(item.innerHTML);
    }

然后将该总和分配给您的总标签

$("#<%= totalHours.ClientID %>").text(sum);