计算网格视图字段总数并使用 javascript 显示在页脚文本框中

Calculating gridview field total and displaying in footer text box using javascript

本文关键字:显示 文本 javascript 字段 视图 网格 计算      更新时间:2023-09-26

我正在努力找出网格视图单元格的总数并显示值页脚文本框。每次我得到异常时:请帮助我某人我正在做错什么:

这是例外:Microsoft JScript 运行时错误:预期对象*这是我的网格视图代码:*

 <div>
 <asp:gridview ID="Gridview1" runat="server" ShowFooter="true" 
        onrowcommand="Gridview1_RowCommand"  AutoGenerateColumns="false" 
        CellSpacing="0" CellPadding="0" Font-Bold="false" 
        onrowdeleting="Gridview1_RowDeleting">
    <Columns>
  <asp:BoundField DataField="RowNumber" HeaderText="Row Number"/>
  <asp:TemplateField HeaderText="Select" ControlStyle-Width="50px" HeaderStyle-Font-Bold="false" ControlStyle-Font-Bold="false">
 <ItemTemplate>
     <asp:CheckBox ID="chkSelect" runat="server" Width="80px"/>
 </ItemTemplate>     
 </asp:TemplateField>
    <asp:TemplateField HeaderText="Header 1" HeaderStyle-Font-Bold="false"  ControlStyle-Font-Bold="false">
        <ItemTemplate>
            <asp:TextBox ID="TextBox1" runat="server" Width="70px"></asp:TextBox>
        </ItemTemplate>            
        <FooterTemplate>
            <asp:Label ID="lblTotal" runat="server" Text="Total" Font-Bold="true">       </asp:Label>
        </FooterTemplate>            
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Header 2"  HeaderStyle-Font-Bold="false" ControlStyle-Font-Bold="false">
        <ItemTemplate>
            <asp:TextBox ID="TextBox2" Width="70px" runat="server" onkeyup="Calculate('Gridview1')"></asp:TextBox>
        </ItemTemplate>            
        <FooterTemplate>
            <asp:TextBox ID="total" runat="server" Width="70px"></asp:TextBox>
        </FooterTemplate>            
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Header 3" HeaderStyle-Font-Bold="false" ControlStyle-Font-Bold="false">
        <ItemTemplate>
             <asp:TextBox ID="TextBox3" Width="70px" runat="server" ></asp:TextBox>
        </ItemTemplate>
        <FooterStyle HorizontalAlign="Right" />
        <FooterTemplate>
         <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" CommandName="AddNewRow" />
        </FooterTemplate>
    </asp:TemplateField>
    </Columns>
  </asp:gridview>   
  </div>

这是我的JavaScript代码:

   <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>  
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script> 
<script type="text/javascript">  
function Calculate(GridView)
{
   var total = 0;   
   var gridview = document.getElementById('<%=Gridview1.ClientID %>').getElementsByTagName("input");        
   for ( i = 0; i < gridview.rows.length; i ++)
   {
       var node = gridview.rows[i].cells[3].childNodes[3]; //textbox  
       if (node != undefined && node.type == "text") //check only textbox, ignore empty one
            if (!isNaN(node.value) && node.value != "") //check for valid number
               total += parseInt(node.value); 
   }       
  // document.getElementById("total").innerHTML = total.toString(); //display
   var gridview1 = document.getElementById('<%=grdview1.ClientID %>');
   gridview1.rows[gridview.rows.length -1].cells[0].innerHTML=total;
}

我尝试了很多方法,但每次都得到相同的异常:Microsoft JScript 运行时错误:预期对象

我的JavaScript代码似乎有问题。请有人帮帮我。

你的函数不需要接受一个对象,因为你没有在你的javascript中使用它,你传递GridView的方式我相信无论如何都不会奏效。

我认为如果你利用一些jQuery选择器来查找你需要的DOM元素,你的javascript也会更干净,更容易理解。您可以对要总计的文本框使用一个特殊的类,如下所示:

....
<asp:TemplateField HeaderText="Header 1" HeaderStyle-Font-Bold="false"  ControlStyle-Font-Bold="false">
    <ItemTemplate>
        <asp:TextBox ID="TextBox1" Class="TotalBox" runat="server" Width="70px"></asp:TextBox>
    </ItemTemplate>            
    <FooterTemplate>
        <asp:Label ID="lblTotal" Class="TotalLabel" runat="server" Text="Total" Font-Bold="true">       </asp:Label>
    </FooterTemplate>            
</asp:TemplateField>
....

Javacript

<script type="text/javascript">
function Calcutate()
{
     var total = 0;
     $('.TotalBox').each(function() {
         total = parseInt(this.val()) + total;
     });
     $('.TotalLabel').html(total);
}
</script>