Javascript 对网格中的值求和并显示在网格的页脚中答案

【问题标题】：Javascript to sum the values in grid and show in footer of gridJavascript 对网格中的值求和并显示在网格的页脚中
【发布时间】：2013-05-28 04:25:27
【问题描述】：

大家好，目前我正在开发一个 javascript 函数，该函数需要在页脚行中显示 gridview 单元格的总和。现在我能够得到答案，但我无法将值保存在页脚行中。谁能帮我将值保存到gridview页脚标签。提前致谢。

这是我的js函数。

    function addTotal() {
        var input = document.getElementsByTagName("input");
        var Total = '0.0';
        var Sample;
        var val;
        for (var i = 0; i < input.length; i++) {
            if (input[i].type == "text") {
                if (input[i].id.indexOf("txtpercent") > 0) {
                    Sample = document.getElementById(input[i].id).value;
                    var val = parseFloat(Sample.replace(",", ""));

                    if (isNaN(val) == true) {
                        val = 0;
                    }

                    Total = parseFloat(Total) + val;
                    //document.getElementById("Flblallocationpercent").innerHTML=Total;
                }
            }
        }
        alert(Total);
        if (Total != 100) {
            alert("Allocation should be equal to 100 %")
            return false;
        }
    }

这是调用函数的设计部分

<asp:TemplateField HeaderText="Allocation Percentage">
                            <ItemTemplate>
                                        <asp:TextBox ID="txtpercent" runat="server" Text="" OnTextChanged="allocate_sum"
                                            Visible="true" ToolTip="Percentage" onblur="addTotal()" />

                            </ItemTemplate>
                            <FooterTemplate >

                                        <asp:Label ID="Flblallocationpercent" runat="server" Enabled="true" Width="95%" />

                            </FooterTemplate>
                            <FooterStyle HorizontalAlign="Center" Width="5%" />
                            <ItemStyle HorizontalAlign="Center" Width="5%" />
                        </asp:TemplateField>

【问题讨论】：

您是否确保 DOM 具有 ID 为 Flblallocationpercent 的元素
Flblallocationpercent 是页脚标签的名称。我不确定它是否具有 ID 元素。这就是为什么我评论了那条线
默认情况下，服务器端控件的 id 和名称将相同。只需检查该控件是否在 DOM 中，并在取消注释该行后检查该页面中是否有任何 javascript 错误。
我收到以下错误。Microsoft JScript 运行时错误：'document.getElementById(...)' is null or not an object
所以这意味着该元素不在DOM中。请检查页面源并确保该元素在 DOM 中。一旦可用，您的代码就会运行良好。

标签： c# .net gridview javascript

【解决方案1】：

参考以下 Javascript 函数：

for (var i = 1; i < gridLength - 1; i++) {


                    sprice = grid.rows[i].cells[3].innerText;

                    sprice = sprice.replace(code, "");

                    sprice = sprice.replace(",", "");
                    if (sprice == "")
                        price = 0;
                    else
                        price = parseFloat(sprice);


                    subTotal = subTotal + parseFloat(price);

                }

通过THIS链接，您还将获得引用背后的代码。

希望对您有所帮助。

【讨论】：

值绑定在网格页脚的位置
我为您提供了一个链接，在该链接上，它清楚地显示了页脚的绑定值

【解决方案2】：

请注意下面提到的代码，将 cssclass 分配给 Textbox 和 Label。

<asp:TemplateField HeaderText="Allocation Percentage">
                            <ItemTemplate>
                                        <asp:TextBox ID="txtpercent" runat="server" Text="" Visible="true" ToolTip="Percentage" CssClass="txtAmount" onblur="addTotal()" />

                            </ItemTemplate>
                            <FooterTemplate >

                                        <asp:Label ID="Flblallocationpercent" runat="server" CssClass="TotalValue" ForeColor="Red" Width="95%" />

                            </FooterTemplate>
                            <FooterStyle HorizontalAlign="Center" Width="5%" />
                            <ItemStyle HorizontalAlign="Center" Width="5%" />
                        </asp:TemplateField>

在你的 head 部分添加以下 Javascript 函数，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">                     

            function addTotal() {

                var Total = '0.0';
                var Sample;

                $(".txtAmount").each(function(){


            Total += parseFloat($(this).val());
            });

            alert(Total);
            $(".txtAmount").val(Total);
                    //OR
            $(".txtAmount").html(Total);
        }
</script>

并检查它是否解决了您的问题。希望对你有帮助

【讨论】：

不.. 它不起作用。该值显示为一些未定义的值（0.NanNanNan......）虽然它没有显示在页脚中..