Solved

how to loop through gridview rows using jquery after checkbox click

Posted on 2013-10-24
10
3,638 Views
Last Modified: 2013-11-08
I have a gridview within an update panel that I need to have calculated anytime someone clicks on or clicks off a checkbox that is one of the gridview columns.  The gridview also contains a column with a $ amount.  When someone clicks off the checkbox I then need to go through the rows and calculate those rows that still have the checkbox checked.   I would like to do this in a jquery script.  Any help will be greatly appreciated.

Here is the code.

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
		
		<Triggers>
			<asp:AsyncPostBackTrigger ControlID="btngrid" EventName="Click" />
			<%--<asp:AsyncPostBackTrigger ControlID="AsyncFileUpload1" EventName="UploadedComplete" />--%>
		</Triggers>
		<ContentTemplate>
			
		
			<table style="width:100%">
			<tr>
			<td>
				<asp:Label ID="lblFileName" runat="server"></asp:Label></td>
				<td style="text-align:right">
				<asp:Label runat="server" Text="eSite Posting Date:" Font-Bold="True"></asp:Label>
				&nbsp;
				<asp:TextBox runat="server" ID="txtDate"></asp:TextBox>
					<asp:CalendarExtender ID="txtDate_CalendarExtender" runat="server" Enabled="True" TargetControlID="txtDate">
					</asp:CalendarExtender>
					
				</td></tr>
				<tr>
					<td>
					
						<asp:CheckBox ID="ChkAll" runat="server" AutoPostBack="True" Text="Select All" />
					
					</td>
					<td style="text-align: right">
						<asp:Label ID="Label19" runat="server" Font-Bold="True" Text="Enter Deposit Total:"></asp:Label>
						&nbsp;<asp:TextBox ID="TxtControlTotal" runat="server"></asp:TextBox>
					</td>
				</tr>
				
			</table>
			
			&nbsp;&nbsp;
			
			<br />
			<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black"
				GridLines="None"  Font-Size="X-Small" HorizontalAlign="Left" DataKeyNames="ID" EmptyDataText="No Items found" ShowFooter="True">
				<Columns>
					<asp:TemplateField  >
						<ItemTemplate>
							<asp:ImageButton ID="btnID2" runat="server" CommandArgument='<%# Bind("ID") %>' CommandName="Select" Text="Change" ImageUrl="../images/link.png"> </asp:imageButton>
						</ItemTemplate>
					</asp:TemplateField>
					<asp:TemplateField HeaderText="Begin Date" >
						<EditItemTemplate>
							<asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("BeginDate", "{0:d}") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="Label2" runat="server" Text='<%# Bind("BeginDate", "{0:d}") %>'></asp:Label>
						</ItemTemplate>
						
						<HeaderStyle HorizontalAlign="Left" />
						<ItemStyle Width="65px" />
						
					</asp:TemplateField>
					<asp:TemplateField HeaderText="End Date" >
						<EditItemTemplate>
							<asp:TextBox ID="TextBox3" runat="server" Text='<%# Eval("BeginDate", "{0:d}") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="Label3" runat="server" Text='<%# Bind("BeginDate", "{0:d}") %>'></asp:Label>
						</ItemTemplate>
						
						<HeaderStyle HorizontalAlign="Left" />
						<ItemStyle HorizontalAlign="Left" Width="65px" />
						
					</asp:TemplateField>
					<asp:TemplateField HeaderText="Location" >
						<EditItemTemplate>
							<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("LocationName") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="Label4" runat="server" Text='<%# Bind("LocationName") %>'></asp:Label>
						</ItemTemplate>
						
						<HeaderStyle HorizontalAlign="Left" />
						<ItemStyle HorizontalAlign="Left" Width="100px" />
						
					</asp:TemplateField>
					<asp:TemplateField HeaderText="Deposit Acct">
						<EditItemTemplate>
							<asp:TextBox ID="txtDepositAcct" runat="server" Text='<%# Bind("DepositAcct") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="lblDepositAcct" runat="server" Text='<%# Bind("DepositAcct") %>'></asp:Label>
						</ItemTemplate>
						<HeaderStyle HorizontalAlign="Left" />
						<ItemStyle Width="70px" />
					</asp:TemplateField>
					<asp:TemplateField HeaderText="Submit Date" Visible="False" >
						<EditItemTemplate>
							<asp:TextBox ID="TextBox6" runat="server" Text='<%# Eval("SubmitDate", "{0:d}") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="Label6" runat="server" Text='<%# Bind("SubmitDate", "{0:d}") %>'></asp:Label>
						</ItemTemplate>
						
					</asp:TemplateField>
					<asp:TemplateField HeaderText="Post Date" >
						<EditItemTemplate>
							<asp:TextBox ID="TextBox7" runat="server" Text='<%# Eval("PostDate", "{0:d}") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="Label7" runat="server" Text='<%# Bind("PostDate", "{0:d}") %>'></asp:Label>
						</ItemTemplate>
						
					</asp:TemplateField>
					
					<asp:TemplateField HeaderText="Deposit No." ControlStyle-Width="60px">
						<EditItemTemplate>
							<asp:TextBox ID="txtDepositNum" runat="server" Text='<%# Bind("DepositNum") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="lblDepositNum" text-align="center" runat="server" Text='<%# Bind("DepositNum") %>' ></asp:Label>
						</ItemTemplate>
						<HeaderStyle HorizontalAlign="Center" />
						<ItemStyle HorizontalAlign="Center" />
						<ControlStyle Width="60px" />
						
						
					</asp:TemplateField>
					<asp:TemplateField HeaderText="Type">
						<EditItemTemplate>
							<asp:TextBox ID="TextBox9" runat="server" Text='<%# Bind("ItemType") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="Label9" runat="server" Text='<%# Bind("ItemType") %>'></asp:Label>
						</ItemTemplate>
						<HeaderStyle HorizontalAlign="left" />
					</asp:TemplateField>
					<asp:TemplateField HeaderText="User Name" ControlStyle-Width="60">
						<EditItemTemplate>
							<asp:TextBox ID="TextBox11" runat="server" Text='<%# Bind("UserName") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="Label11" runat="server" Text='<%# Bind("UserName") %>' ></asp:Label>
						</ItemTemplate>
						<ControlStyle Width="60px" />
						<HeaderStyle HorizontalAlign="Left" />
					</asp:TemplateField>
					
					<asp:TemplateField HeaderText="Route No. / Acct No." ControlStyle-Width="50px">
						<EditItemTemplate>
							<asp:TextBox ID="TextBox12" runat="server" Text='<%# Eval("RouteNo") + "/" %> '></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="Label12" runat="server" Text='<%# Eval("RouteNo") %>'></asp:Label>
							<asp:Label ID="Label13" runat="server" Text='<%# Eval("AcctNo" ) %>'></asp:Label>
						</ItemTemplate>
						
						<ControlStyle Width="65px" />
						
						<HeaderStyle HorizontalAlign="Left" />
						<ItemStyle HorizontalAlign="Left" ForeColor="Blue" />
						
					</asp:TemplateField>
					<asp:TemplateField HeaderText="Post Amt.">
						<EditItemTemplate>
							<asp:TextBox ID="txtPostAmt" runat="server" Text='<%# Bind("PostAmt","{0:c}") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="lblPostAmt" runat="server" Text='<%# Bind("PostAmt","{0:c}") %>'></asp:Label>
						</ItemTemplate>
						<ItemStyle HorizontalAlign="Right" ForeColor="Red" />
						<HeaderStyle HorizontalAlign="Center" />
					</asp:TemplateField>
					<asp:TemplateField HeaderText="Check No.">
						<EditItemTemplate>
							<asp:TextBox ID="TextBox15" runat="server" Text='<%# Bind("CheckNo") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="Label15" runat="server" Text='<%# Bind("CheckNo") %>'></asp:Label>
						</ItemTemplate>
						<ItemStyle HorizontalAlign="Center" />
					</asp:TemplateField>
					<asp:TemplateField HeaderText="eSite ID">
						<EditItemTemplate>
							<asp:TextBox ID="txteSiteID" runat="server" Text='<%# Bind("eSiteID") %>'></asp:TextBox>
						</EditItemTemplate>
						<ItemTemplate>
							<asp:Label ID="lbleSiteID" runat="server" Text='<%# Bind("eSiteID") %>'></asp:Label>
						</ItemTemplate>
						<ItemStyle Wrap="false" />
					</asp:TemplateField>
					
					<asp:TemplateField HeaderText="C">
						<ItemTemplate>
							<asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="false" readonly = "true" CommandName="Confirmed" CommandArgument='<%# Bind("IsConfirmed") %>' />
						</ItemTemplate>
						<ItemStyle Width="50px" HorizontalAlign="Center" />
					</asp:TemplateField>
									
										
					<asp:TemplateField HeaderText="M">
						<EditItemTemplate>
							<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Bind("isMatched") %>' AutoPostBack="true"    />
						</EditItemTemplate>
						<ItemTemplate>
							<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Bind("isMatched") %>' AutoPostBack="true"  />
						</ItemTemplate>
						<FooterTemplate>
							<asp:Label ID="Label20" runat="server" Text="Totals"></asp:Label>
						</FooterTemplate>
					</asp:TemplateField>
									
					
					<asp:BoundField DataField="ResiName" HeaderText="Name" ReadOnly="True" Visible="True" />
					
					<asp:TemplateField HeaderText="Bldg/Unit">
						<ItemTemplate>
							<asp:Label runat="server" ID="label17" Enabled="false" Visible="True" Text='<%# Eval("BldgID") + "-" + Eval("UnitID") %>'></asp:Label>
						</ItemTemplate>
						<FooterTemplate>
							<asp:Label ID="txtSumAmt" runat="server" Width="75px"></asp:Label>
						</FooterTemplate>
					</asp:TemplateField>
						
					<asp:BoundField DataField="PCount" HeaderText="PCount" ReadOnly="True" Visible="False" />
					<asp:TemplateField HeaderText="P">
						<ItemTemplate>
							<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Bind("Collection") %>' />
						</ItemTemplate>
						<EditItemTemplate>
							<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Bind("Collection") %>' />
						</EditItemTemplate>
					</asp:TemplateField>
				</Columns>
				<FooterStyle BackColor="Tan" />
				<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
				<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
				<HeaderStyle BackColor="Tan" Font-Bold="True" HorizontalAlign="Left" />
				<EditRowStyle Font-Bold="True" />
				<AlternatingRowStyle BackColor="PaleGoldenrod" />
			</asp:GridView>
			<p>
				&nbsp; &nbsp;
			</p>
			<br />
			<div>
				<asp:HiddenField ID="HFTotals" runat="server" Value ="0" />
			</div>
			<div style="width:100%; text-align:center;">
				<asp:Button runat="server" ID="btnPost" Text="Post Entries" Enabled ="false" />
			</div>
		</ContentTemplate>
	</asp:UpdatePanel>

Open in new window

0
Comment
Question by:mgmhicks
  • 4
  • 4
  • 2
10 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39597349
Whenever you want to change server-side generated code with javascript you need to forget about the server-side code and look at what actually was rendered in the browser.
Open the page and view source code or better yet, use firebug or any other developer tools to visually inspect the DOM.

Ok, this said, I can tell you you'll find a <table> block where you have your grid view.

Loop through all the rows checking the value of the chackbox and keep adding the value in the value column to a variable (be aware of numeric formats).

To help you further I need the generated table markup, not the ASP.net gridview definition.
0
 

Author Comment

by:mgmhicks
ID: 39597483
Here is the rendered code for a row in the gridview1.  The ID of the checkbox that gets checked Is checkbox1 the id of the column that needs to be summed is PostAmt.  Let me know if you need more, and thank you for the help.



<table id="ctl00_ContentPlaceHolder1_GridView1" cellspacing="0" cellpadding="2" border="0" align="Left" style="color:Black;background-color:LightGoldenrodYellow;border-color:Tan;border-width:1px;border-style:solid;font-size:X-Small;border-collapse:collapse;">
<tbody>
<tr align="left" style="background-color:Tan;font-weight:bold;">
<tr>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_btnID2" type="image" style="border-width:0px;" src="../images/link.png" text="Change" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$btnID2">
</td>
<td style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label2">10/14/2013</span>
</td>
<td align="left" style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label3">10/14/2013</span>
</td>
<td align="left" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label4">Cool Creek</span>
</td>
<td style="width:70px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_lblDepositAcct">985002771</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label7">10/14/2013</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_lblDepositNum" style="display:inline-block;width:60px;" text-align="center">38257</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label9">Personal Check</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label11" style="display:inline-block;width:60px;">Kimberly Stojak</span>
</td>
<td align="left" style="color:Blue;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label12" style="display:inline-block;width:65px;">8002</span>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label13" style="display:inline-block;width:65px;">20878721447</span>
</td>
<td align="right" style="color:Red;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_lblPostAmt">$20.00</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label15"></span>
</td>
<td style="white-space:nowrap;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_lbleSiteID">CM-155 </span>
</td>
<td align="center" style="width:50px;">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_ImageButton1" type="image" style="border-width:0px;" src="../images/X3.png" readonly="true" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$ImageButton1">
</td>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_CheckBox1" type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$GridView1$ctl02$CheckBox1\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$CheckBox1">
</td>
<td> </td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_label17" disabled="disabled">-</span>
</td>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_CheckBox2" type="checkbox" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$CheckBox2">
</td>
</tr>

Open in new window

0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 39597599
I wrote this but didn't test it:
var total = 0;
$.each('table[id$="_GridView1"] tbody tr', function(idx,item){
    var $item = $(item);
    var chk = $item.find('input[type="checkbox"][id$="_CheckBox1"]');
    var value = parseFloat($item.find('span[id$="_lblPostAmt"]').html().replace(/\$/,""));
    
    if(chk.val()){
        total = total + value;
    }
});

alert(total);

Open in new window

It shouldn't be far from the truth... :)

I wrote it here http://jsfiddle.net/y8g9u/ but it doesn't quite run well and I'm a bit short on time now, sorry.
Have a try and tell me how it went
0
 

Author Comment

by:mgmhicks
ID: 39597786
I changed things a little but when I click on the checkbox nothing happens.  Also update jsfiddle file.  Any ideas.

<script type="text/javascript">
		$(function() {
			var total = 0;
			var checked = $('input:checkbox').click(function(e) {
				calculateSum();
			});

		});

		function calculateSum() {

			$checked.each('table[id$="_GridView1"] tbody tr', function(idx, item) {
				var $item = $(item);
				var chk = $item.find('input[type="checkbox"][id$="_CheckBox1"]');
				var value = parseFloat($item.find('span[id$="_lblPostAmt"]').html().replace(/\$/, ""));

				if (chk.val())
				{ total = total + value; }
			});

			alert(total);


		}
	
	</script>

Open in new window

0
 
LVL 27

Expert Comment

by:Ark
ID: 39599486
$(function(){
    $('table[id$="_GridView1"] tbody tr')
    .find(':checkbox[id*=CheckBox1]')
    .click(function(){alert(calculateSum());});
});

function calculateSum(){
    var total = 0;
    $('table[id$="_GridView1"] tbody tr')
    .has(':checkbox[id*=CheckBox1]:checked')
    .each(function(){
        total += parseFloat(
            $(this).find('span[id$="_lblPostAmt"]')
            .html().replace(/\$/, ""));
    });
    return total;
}

Open in new window

BTW I suggest you to use classes (for table and checkboxes) to easy find elements with jquery
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:mgmhicks
ID: 39600321
When I click the checkbox the function is still not firing.
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39600329
The markup of the table you posted above is not complete...
Can you give me the full table? Put it in a file.
I need the full GridView1 table from <table> to </table>
0
 

Author Comment

by:mgmhicks
ID: 39600358
<table id="ctl00_ContentPlaceHolder1_GridView1" cellspacing="0" cellpadding="2" border="0" align="Left" style="color:Black;background-color:LightGoldenrodYellow;border-color:Tan;border-width:1px;border-style:solid;font-size:X-Small;border-collapse:collapse;">
<tbody>
<tr align="left" style="background-color:Tan;font-weight:bold;">
<th scope="col"> </th>
<th align="left" scope="col">Begin Date</th>
<th align="left" scope="col">End Date</th>
<th align="left" scope="col">Location</th>
<th align="left" scope="col">Deposit Acct</th>
<th scope="col">Post Date</th>
<th align="center" scope="col">Deposit No.</th>
<th align="left" scope="col">Type</th>
<th align="left" scope="col">User Name</th>
<th align="left" scope="col">Route No. / Acct No.</th>
<th align="center" scope="col">Post Amt.</th>
<th scope="col">Check No.</th>
<th scope="col">eSite ID</th>
<th scope="col">C</th>
<th scope="col">M</th>
<th scope="col">Name</th>
<th scope="col">Bldg/Unit</th>
<th scope="col">P</th>
</tr>
<tr>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_btnID2" type="image" style="border-width:0px;" src="../images/link.png" text="Change" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$btnID2">
</td>
<td style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label2">10/14/2013</span>
</td>
<td align="left" style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label3">10/14/2013</span>
</td>
<td align="left" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label4">Cool Creek</span>
</td>
<td style="width:70px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_lblDepositAcct">985002771</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label7">10/14/2013</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_lblDepositNum" style="display:inline-block;width:60px;" text-align="center">38257</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label9">Personal Check</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label11" style="display:inline-block;width:60px;">Kimberly Stojak</span>
</td>
<td align="left" style="color:Blue;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label12" style="display:inline-block;width:65px;">8002</span>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label13" style="display:inline-block;width:65px;">20878721447</span>
</td>
<td align="right" style="color:Red;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_lblPostAmt">$20.00</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_Label15"></span>
</td>
<td style="white-space:nowrap;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_lbleSiteID">CM-155 </span>
</td>
<td align="center" style="width:50px;">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_ImageButton1" type="image" style="border-width:0px;" src="../images/X3.png" readonly="true" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$ImageButton1">
</td>
<td>
<span disabled="disabled">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_CheckBox1" type="checkbox" disabled="disabled" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$CheckBox1">
</span>
</td>
<td> </td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl02_label17" disabled="disabled">-</span>
</td>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_CheckBox2" type="checkbox" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$CheckBox2">
</td>
</tr>
<tr style="background-color:PaleGoldenrod;">
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl03_btnID2" type="image" style="border-width:0px;" src="../images/link.png" text="Change" name="ctl00$ContentPlaceHolder1$GridView1$ctl03$btnID2">
</td>
<td style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_Label2">10/14/2013</span>
</td>
<td align="left" style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_Label3">10/14/2013</span>
</td>
<td align="left" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_Label4">Cool Creek</span>
</td>
<td style="width:70px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_lblDepositAcct">985002771</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_Label7">10/14/2013</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_lblDepositNum" style="display:inline-block;width:60px;" text-align="center">38257</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_Label9">Personal Check</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_Label11" style="display:inline-block;width:60px;">Kimberly Stojak</span>
</td>
<td align="left" style="color:Blue;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_Label12" style="display:inline-block;width:65px;">8002</span>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_Label13" style="display:inline-block;width:65px;">20878721436</span>
</td>
<td align="right" style="color:Red;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_lblPostAmt">$1,000.00</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_Label15"></span>
</td>
<td style="white-space:nowrap;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_lbleSiteID"> </span>
</td>
<td align="center" style="width:50px;">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl03_ImageButton1" type="image" style="border-width:0px;" src="../images/X3.png" readonly="true" name="ctl00$ContentPlaceHolder1$GridView1$ctl03$ImageButton1">
</td>
<td>
<span disabled="disabled">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl03_CheckBox1" type="checkbox" disabled="disabled" name="ctl00$ContentPlaceHolder1$GridView1$ctl03$CheckBox1">
</span>
</td>
<td> </td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl03_label17" disabled="disabled">-</span>
</td>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl03_CheckBox2" type="checkbox" name="ctl00$ContentPlaceHolder1$GridView1$ctl03$CheckBox2">
</td>
</tr>
<tr>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl04_btnID2" type="image" style="border-width:0px;" src="../images/link.png" text="Change" name="ctl00$ContentPlaceHolder1$GridView1$ctl04$btnID2">
</td>
<td style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_Label2">10/14/2013</span>
</td>
<td align="left" style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_Label3">10/14/2013</span>
</td>
<td align="left" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_Label4">Cool Creek</span>
</td>
<td style="width:70px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_lblDepositAcct">985002771</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_Label7">10/14/2013</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_lblDepositNum" style="display:inline-block;width:60px;" text-align="center">38257</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_Label9">Personal Check</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_Label11" style="display:inline-block;width:60px;">Kimberly Stojak</span>
</td>
<td align="left" style="color:Blue;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_Label12" style="display:inline-block;width:65px;">031301846</span>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_Label13" style="display:inline-block;width:65px;">538353947</span>
</td>
<td align="right" style="color:Red;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_lblPostAmt">$73.40</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_Label15">478</span>
</td>
<td style="white-space:nowrap;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_lbleSiteID">CM-121 </span>
</td>
<td align="center" style="width:50px;">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl04_ImageButton1" type="image" style="border-width:0px;" src="../images/X3.png" readonly="true" name="ctl00$ContentPlaceHolder1$GridView1$ctl04$ImageButton1">
</td>
<td>
<span disabled="disabled">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl04_CheckBox1" type="checkbox" disabled="disabled" name="ctl00$ContentPlaceHolder1$GridView1$ctl04$CheckBox1">
</span>
</td>
<td> </td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl04_label17" disabled="disabled">-</span>
</td>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl04_CheckBox2" type="checkbox" name="ctl00$ContentPlaceHolder1$GridView1$ctl04$CheckBox2">
</td>
</tr>
<tr style="background-color:PaleGoldenrod;">
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl05_btnID2" type="image" style="border-width:0px;" src="../images/link.png" text="Change" name="ctl00$ContentPlaceHolder1$GridView1$ctl05$btnID2">
</td>
<td style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_Label2">10/14/2013</span>
</td>
<td align="left" style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_Label3">10/14/2013</span>
</td>
<td align="left" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_Label4">Cool Creek</span>
</td>
<td style="width:70px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_lblDepositAcct">985002771</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_Label7">10/14/2013</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_lblDepositNum" style="display:inline-block;width:60px;" text-align="center">38257</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_Label9">Personal Check</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_Label11" style="display:inline-block;width:60px;">Kimberly Stojak</span>
</td>
<td align="left" style="color:Blue;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_Label12" style="display:inline-block;width:65px;">031302955</span>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_Label13" style="display:inline-block;width:65px;">950793681</span>
</td>
<td align="right" style="color:Red;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_lblPostAmt">$90.40</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_Label15">2662</span>
</td>
<td style="white-space:nowrap;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_lbleSiteID">CM-112 </span>
</td>
<td align="center" style="width:50px;">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl05_ImageButton1" type="image" style="border-width:0px;" src="../images/check2x.png" readonly="true" name="ctl00$ContentPlaceHolder1$GridView1$ctl05$ImageButton1">
</td>
<td>
<span disabled="disabled">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl05_CheckBox1" type="checkbox" disabled="disabled" checked="checked" name="ctl00$ContentPlaceHolder1$GridView1$ctl05$CheckBox1">
</span>
</td>
<td>FRED J. WILLIAMS</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl05_label17" disabled="disabled">CM-112</span>
</td>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl05_CheckBox2" type="checkbox" name="ctl00$ContentPlaceHolder1$GridView1$ctl05$CheckBox2">
</td>
</tr>
<tr>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl06_btnID2" type="image" style="border-width:0px;" src="../images/link.png" text="Change" name="ctl00$ContentPlaceHolder1$GridView1$ctl06$btnID2">
</td>
<td style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_Label2">10/14/2013</span>
</td>
<td align="left" style="width:65px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_Label3">10/14/2013</span>
</td>
<td align="left" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_Label4">Cool Creek</span>
</td>
<td style="width:70px;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_lblDepositAcct">985002771</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_Label7">10/14/2013</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_lblDepositNum" style="display:inline-block;width:60px;" text-align="center">38257</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_Label9">Personal Check</span>
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_Label11" style="display:inline-block;width:60px;">Kimberly Stojak</span>
</td>
<td align="left" style="color:Blue;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_Label12" style="display:inline-block;width:65px;">031312738</span>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_Label13" style="display:inline-block;width:65px;">5111123305</span>
</td>
<td align="right" style="color:Red;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_lblPostAmt">$64.90</span>
</td>
<td align="center">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_Label15">1207</span>
</td>
<td style="white-space:nowrap;">
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_lbleSiteID">CM-040 </span>
</td>
<td align="center" style="width:50px;">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl06_ImageButton1" type="image" style="border-width:0px;" src="../images/check2x.png" readonly="true" name="ctl00$ContentPlaceHolder1$GridView1$ctl06$ImageButton1">
</td>
<td>
<span disabled="disabled">
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl06_CheckBox1" type="checkbox" disabled="disabled" checked="checked" name="ctl00$ContentPlaceHolder1$GridView1$ctl06$CheckBox1">
</span>
</td>
<td>Kelly S. Grube</td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl06_label17" disabled="disabled">CM-040</span>
</td>
<td>
<input id="ctl00_ContentPlaceHolder1_GridView1_ctl06_CheckBox2" type="checkbox" name="ctl00$ContentPlaceHolder1$GridView1$ctl06$CheckBox2">
</td>
</tr>
<tr style="background-color:Tan;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl07_Label20">Totals</span>
</td>
<td> </td>
<td>
<span id="ctl00_ContentPlaceHolder1_GridView1_ctl07_txtSumAmt" style="display:inline-block;width:75px;">$155.30</span>
</td>
<td> </td>
</tr>
</tbody>
</table>

Open in new window

0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39600428
Ok, like that was easier :)
http://jsfiddle.net/y8g9u/7/
var total = 0;

$('table[id$="_GridView1"] tr').each(function(idx, item){
    var $item = $(item);
    var chk = $item.find('input[type="checkbox"][id$="_CheckBox1"]:checked');
    var value = $item.find('span[id$="_lblPostAmt"]').html();
    if(value) value = parseFloat(value.replace(/[\$,]/g,""));

    if(chk && chk.length && value){
        total = total + value;
    }
});

alert(total);

Open in new window

0
 
LVL 27

Expert Comment

by:Ark
ID: 39602136
For some reason you checkboxes#1 was disabled so I enabled them on page load.
see attached html examplechkTest.html
    <script type="text/javascript">
$(function(){
var boxes=$('table[id$="_GridView1"] tbody tr').find(':checkbox[id*=CheckBox1]');
boxes.prop('disabled',false); //enable checkboxes
var spanTotal=$("span[id$=_txtSumAmt]");
boxes.click(function(){
        var sum=calculateSum().toFixed(2).replace(/(^\d{1,3}|\d{3})(?=(?:\d{3})+(?:$|\.))/g, '$1,');
        spanTotal.text('$' + sum);
    });	
});

function calculateSum(){
    var total = 0;
    $('table[id$="_GridView1"] tbody tr')
    .has(':checkbox[id*=CheckBox1]:checked')
    .each(function(){
        total += parseFloat(
            $(this).find('span[id$="_lblPostAmt"]').html().replace(/[\$,]/g,""));
    });
    return total;
}

Open in new window

0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now