2

まず第一に、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>

まっすぐに提案する場合:各行の性別と年齢を取得するにはどうすればよいですか?

PS私はJQueryソリューションにもオープンです........

4

2 に答える 2

5

グリッドビューの があるので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);
            }
        }
    }
};

デモ: 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());
    });
});

デモ: http://jsfiddle.net/YgY35/

于 2012-10-17T15:10:37.100 に答える