Articles → JQUERY → Loop Through Gridview Using Jquery

Loop Through Gridview Using Jquery






Prerequisite




  1. Have hands on experience in creating ASP.Net application.
  2. Have basic knowledge of jQuery.
  3. Know how to bind a grid from any datasource(preferably XML file for this tutorial).

Sample Program






<asp:GridView ID="gvTest" runat="server"></asp:GridView>




<root><income mode="Salary" amount="5000"></income><income mode="Shares" amount="2000"></income><income mode="Part time job" amount="1000"></income><income mode="Tuitions" amount="500"></income></root>






protected void Page_Load(object sender, EventArgs e) {
  DataSet ds = new DataSet();
  ds.ReadXml(Server.MapPath("test.xml"));
  gvTest.DataSource = ds.Tables[0];
  gvTest.DataBind();
}






<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false"><Columns><asp:TemplateField><ItemTemplate><asp:Label ID="lblMode" runat="server" ToolTip="MODE" Text='<%#Eval("mode") %>'></asp:Label></ItemTemplate></asp:TemplateField><asp:TemplateField><ItemTemplate><asp:Label ID="lblAmount" ToolTip="AMOUNT" runat="server" Text='<%#Eval("amount") %>'></asp:Label></ItemTemplate></asp:TemplateField></Columns></asp:GridView><div id="totalDiv"></div>







View Source




<table cellspacing="0" rules="all" border="1" id="gvTest" style="border-collapse:collapse;"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td><span id="gvTest_ctl02_lblMode" title="MODE">Salary</span></td><td><span id="gvTest_ctl02_lblAmount" title="AMOUNT">5000</span></td></tr><tr><td><span id="gvTest_ctl03_lblMode" title="MODE">Shares</span></td><td><span id="gvTest_ctl03_lblAmount" title="AMOUNT">2000</span></td></tr><tr><td><span id="gvTest_ctl04_lblMode" title="MODE">Part time job</span></td><td><span id="gvTest_ctl04_lblAmount" title="AMOUNT">1000</span></td></tr><tr><td><span id="gvTest_ctl05_lblMode" title="MODE">Tuitions</span></td><td><span id="gvTest_ctl05_lblAmount" title="AMOUNT">500</span></td></tr></table>





Syntax


$("<Collection_or_any_Control>").each(function() {});



Jquery Code


<script language="javascript" type="text/javascript">
  $(document).ready(function() {
	var total = 0;
	$("table tr td span").each(function() {
		if($(this).attr("title") == 'AMOUNT') {
			total = total + parseInt($(this).text());
		}
	});
	$("div#totalDiv").text(total);
});    
</script>






$("table tr td span").each(function() {});




if($(this).attr("title") == 'AMOUNT'){  }





Output


Picture showing the output of the Loop through gridview using jQuery
Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Friday, November 25, 2011

Query/Feedback


Your Email Id
 
Subject
 
Query/FeedbackCharacters remaining 250