Articles → JQUERY → Loop through gridview using jQuery

Loop through gridview using jQuery




Introduction





Prerequisite











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



Click to Enlarge


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

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250