javascript 使用javascript计算gridview字段总数并在页脚文本框中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6100389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calculating gridview field total and displaying in footer text box using javascript
提问by sumit
I am struglling a lot to find out the total of gridview cells and displaying the values Footer textbox. Every time I am getting the exception: Pls help me somebody whats wrong I am doing:
我正在努力找出 gridview 单元格的总数并显示值页脚文本框。每次我遇到异常时：请帮助我某人我做错了什么：
This is the exception: Microsoft JScript runtime error: Object expected*Here is my gridview code:*
这是例外： Microsoft JScript 运行时错误：预期对象*这是我的 gridview 代码：*
<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>
Here is my JavaScript code:
这是我的 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;
}
I had tried with many ways but every time getting the same exception: Microsoft JScript runtime error: Object expected
我尝试了很多方法，但每次都遇到相同的异常：Microsoft JScript 运行时错误：预期对象
It seems something wrong with my JavaScript code..pls somebody and help me out.
我的 JavaScript 代码似乎有问题。请有人帮助我。
回答by Clayton
Your function doesn't need to take in an object since you are not using it in your javascript, the way you are passing the GridView I don't believe would work anyway.
你的函数不需要接收一个对象，因为你没有在你的 javascript 中使用它，你传递 GridView 的方式我认为无论如何都行不通。
I think your javascript would be cleaner and easier to follow as well if you took advantage of some of the jQuery selectors to find the elements in the DOM you need. You could use a special class for the text boxes you want to total, something like:
我认为如果您利用一些 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
Java脚本
<script type="text/javascript">
function Calcutate()
{
var total = 0;
$('.TotalBox').each(function() {
total = parseInt(this.val()) + total;
});
$('.TotalLabel').html(total);
}
</script>
