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