Looping through asp:GridView data using javascript

Question

First of all, is it even possible to loop through the data in an asp:GridView at Client-side using JavaScript. If Yes, I would like to know how to do that...

As I intend to capture the values of 2 fields on the Grid and attach an image on each row on the basis of their value(that part shouldn't pose much of a problem once I can loop through the data and compare them).

My Grid looks something like this:

 <asp:GridView ID="GridView1" runat="server" EmptyDataText="No Record Found" AllowSorting="true"
        AllowPaging="false" OnRowCreated="GridView1_RowCreated" Visible="true" BackColor="ButtonShadow"
        OnSorting="GridView1_Sort" AutoGenerateColumns="false" GridLines="None" >
        <Columns>
            </asp:TemplateField>
            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
            <asp:BoundField DataField="Gender" HeaderText="Gender" SortExpression="Gender" />
            <asp:BoundField DataField="Age" HeaderText="Age" SortExpression="Age" />
            <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
            <asp:BoundField DataField="Exam" HeaderText="Exam" SortExpression="Exam" />
            <asp:BoundField DataField="DateTime" HeaderText="DateTime" SortExpression="DateTime" />
            <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
            <asp:BoundField DataField="Priority" HeaderText="Priority" SortExpression="Priority" />
        </Columns>
    </asp:GridView>

If I pitch it straight: How do I capture Gender and Age for each row?

P.S. I am open to JQuery solutions too.......

Solution

Since you have the id of the gridview, you can grab the element in Javascript, iterate through its rows, and then the rows' cells, checking for index 1 (gender) or 2 (age), and get its innerHTML to get the contents. Take a look at this:

window.onload = function () {
    var table, tbody, i, rowLen, row, j, colLen, cell;

    table = document.getElementById("GridView1");
    tbody = table.tBodies[0];

    for (i = 0, rowLen = tbody.rows.length; i < rowLen; i++) {
        row = tbody.rows[i];
        for (j = 0, colLen = row.cells.length; j < colLen; j++) {
            cell = row.cells[j];
            if (j == 1) {
                // Gender
                console.log("--Found gender: " + cell.innerHTML);
            } else if (j == 2) {
                // Age
                console.log("--Found age: " + cell.innerHTML);
            }
        }
    }
};

DEMO: http://jsfiddle.net/ZRXV3/

It definitely depends on the structure of your HTML that is rendered though. There could always be a hidden column or something.

---

UPDATE:

A jQuery solution may be something like this:

$(document).ready(function () {
    var rows, genders, ages;

    rows = $("#GridView1").children("tbody").children("tr");    // Find all rows in table (content)
    genders = rows.children("td:nth-child(2)");    // Find all columns that are the 2nd child
    ages = rows.children("td:nth-child(3)");    // Find all columns that are the 3rd child

    // An example of looping through all "gender" columns
    genders.each(function () {
        console.log($(this).html());
    });
});

DEMO: http://jsfiddle.net/YgY35/

Comments

[Ian]

So technically a <table> should be comprised of a <thead> and <tbody>. It depends on what a GridView actually renders as - it may or may not take this form; it may just be <table><tr></tr><tr></tr></table>. thead is for column headers, while tbody is for the content (and tfoot is the footer). So if you can look at the rendered HTML, you can decide if you need the tBodies[0] part or not. If you look at: developer.mozilla.org/en-US/docs/DOM/table.tBodies , it says there is always an implicit tbody, so I think it's safe to keep it and always use it.

[Ian]

@KeyBrdBasher I just updated my answer with a jQuery solution as well.

[Sayan]

Great answer @ianpgall! got to understand how it works.......though i ll keep the question open just in case smbody cms up wid another insight...