使用javascript通过asp:GridView数据循环

时间:2012-10-17 14:51:48

标签: javascript jquery asp.net gridview

首先,甚至可以使用 JavaScript在客户端 asp:GridView 中循环访问数据。如果是的,我想知道怎么做......

因为我打算在网格上捕获2个字段的值,并根据它们的值在每一行上附加一个图像(一旦我可以循环,该部分就不应该造成很大的问题数据并进行比较)。

我的网格看起来像这个

 <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>

如果我直截了当地说:如何为每一行捕获性别年龄

P.S。我对 JQuery 解决方案也持开放态度.......

2 个答案:

答案 0 :(得分:3)

由于你拥有gridview的id,你可以在Javascript中获取元素,遍历它的行,然后遍历行的单元格,检查索引1(性别)或2(年龄),以及得到它的innerHTML来获取内容。看看这个:

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/

它肯定取决于呈现的HTML结构。可能总是有一个隐藏的列或其他东西。


<强>更新

jQuery解决方案可能是这样的:

$(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/

答案 1 :(得分:0)

我一直期待同样的解决方案,但我找到了上面的答案。实施后,它在IE 11中不起作用。

我修改了解决方案,并且在IE 11中也可以使用。

var rOrders = new Array();
var table, tbody, i, rowLen, row, j, colLen, cell, tr;
var result = false;

table = document.getElementById("<%=gvRunningOrder.ClientID%>");
tbody = table.tBodies[0];
tr = $(tbody).find('tr');

for (i = 0, rowLen = tr.length; i < rowLen; i++) {
    row = tr[i];
    for (j = 0, colLen = row.cells.length; j < colLen; j++) {
        cell = row.cells[j];
        if (j == 1) {
            rOrders.push(cell.childNodes[1].value);
        }
    }
}