是否有一个JQuery解决方案 [英] Is there a JQuery solution to this

问题描述

通过以下网格，如何使用JQuery访问行.我有几个使用相同结构的网格，因此我想使用一种方法来使用javascript访问其数据.因此，我考虑过使用Class标记方法来访问类似元素吗?

With the following grid how is it possible to access the rows using JQuery. I have several grids using the same structure so I wanted to use one method to access their data in javascript. Therefore I thought about using the Class tag method to access the like elements?

<pre lang="xml"><asp:GridView ID="AvailableRolesGrid" runat="server" CssClass="AutorisationGrid"
    AutoGenerateColumns="False" AutomaticPostbackEnabled="False"
    onrowdatabound="AvailableGrid_RowDataBound" EnableViewState="False"
    ShowHeader="False" GridLines="None">
    <RowStyle CssClass="roledataRow" />
    <Columns>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleIdLbl" runat="server" Text='''' CssClass="roledataItem" dataFld="ItemId"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleDescriptionLbl" runat="server" Text=''<%# Bind("Description") %>'' CssClass="roledataItem" dataFld="ItemDescription"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleMemberRolesLbl" runat="server" Text='';'' CssClass="roledataItem" dataFld="MemberRoles"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleMemberTasksLbl" runat="server" Text='';'' CssClass="roledataItem" dataFld="MemberTasks"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleMemberOperationsLbl" runat="server" Text='';'' CssClass="roledataItem" dataFld="MemberOperations"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleMemberAuthorizationLbl" runat="server" Text='';'' CssClass="roledataItem" dataFld="MemberAuthorizations"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleMemberAttributeLbl" runat="server" Text='';'' CssClass="roledataItem" dataFld="MemberAttributes"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <img src="images/signpost.gif" style="float: left; text-align: left; vertical-align: middle;" alt="image" />
            </ItemTemplate>
            <ItemStyle Width="30px" />
        </asp:TemplateField>

        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleName" runat="server" Text=''<%# Bind("Name") %>'' CssClass="roledataItem" dataFld="Name"></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle Width="150px" />
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:ImageButton ID="ReportEditButton" runat="server" CausesValidation="false" ImageUrl="../images/document_edit.jpg"
                    OnClientClick="return false;"
                    ToolTip="Click to edit" AlternateText="Edit" CssClass="editButton" />
            </ItemTemplate>
            <ItemStyle Width="25px" />
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:ImageButton ID="ReportDeleteButton" runat="server" CausesValidation="false"
                    ImageUrl="../images/document_error.jpg" OnClientClick="return false;"
                    ToolTip="Click to delete" AlternateText="Delete" CssClass="deleteButton" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

我通过混合使用JQuery和标准Java来访问以下内容，效果很好，但我只想知道是否使用所有JQuery都可以使用一种更快，更简洁的方法:

I have accessed the following using a mix of JQuery and standard java which works fine but I just wanted to know if there was a faster more concise way using all JQuery:

var grid = $(".AutorisationGrid");
if (grid.length > 0) {
    for (gridindex = 0; gridindex < grid.length; gridindex++) {
        if (grid[gridindex].rows.length > 0) {
            for (rowindex = 0; rowindex < grid[gridindex].rows.length; rowindex++) {
                var itemId = grid[gridindex].rows[rowindex].cells[0].innerText;
                var description = grid[gridindex].rows[rowindex].cells[1].innerText;
                var memberRoles = grid[gridindex].rows[rowindex].cells[2].innerText;
                var membertasks = grid[gridindex].rows[rowindex].cells[3].innerText;
                var memberOperations = grid[gridindex].rows[rowindex].cells[4].innerText;
                var memberAuthorizations = grid[gridindex].rows[rowindex].cells[5].innerText;
                var memberAttributes = grid[gridindex].rows[rowindex].cells[6].innerText;
                var itemname = grid[gridindex].rows[rowindex].cells[7].innerText;

                // generate checkboxes
            }
        }
    }
}

进行以下QUERY查询可以一次为我提供所有行的所有列，但我无法分辨一行从何处结束，另一行从何处开始，这是我的真正问题，因此有一种方法可以访问所有网格，网格中的所有行，然后是所有列，所以我知道一行从哪里结束，另一行从哪里开始?

Doing the following QUery gives me all the columns for all the rows at once but I can''t tell where one row ends and another starts, which is my real problem, so is there a way to access all the grids, all the rows in the grids and then all the columns so I know where one row ends and another begins?

var rowDataItems = $(".roledataItem");
for (i = 0; i < rowDataItems.length; i++) {
    switch (rowDataItems[i].dataFld) {
        case "ItemId":
            var roleItemId = rowDataItems[i].innerText;
            break;
        case "MemberRoles":
            var roleMemberRoles = rowDataItems[i].innerText;
            break;
        case "MemberTasks":
            var roleMemberTasks = rowDataItems[i].innerText;
            break;
        case "MemberOperations":
            var roleMemberOperations = rowDataItems[i].innerText;
            break;
        case "Name":
            var roleItemName = rowDataItems[i].innerText;
            break;
        case "ItemDescription":
            var roleItemDescription = rowDataItems[i].innerText;
            break;
        case "MemberAuthorizations":
            var roleMemberAuthorizations = rowDataItems[i].innerText;
            break;
        case "MemberAttributes":
            var roleMemberAttributes = rowDataItems[i].innerText;
            break;
    }
}

因此，有了这个，我在所有行上拥有了所有列.如何重新格式化jQuery以获取所需的内容?

So with this I have all the columns over all the rows. How do I reformat the jQuery to get what I want?

推荐答案

(" )； 如果(网格长度> 0 ){ for (gridindex = 0 ; gridindex >< grid.length; gridindex ++){ 如果(grid [gridindex] .rows.length > 0 ){ for (rowindex = 0 ; rowindex >< grid [gridindex] .rows.length; rowindex ++){ var itemId = grid [gridindex] .rows [rowindex] .cells [ 0 ].innerText; var description = grid [gridindex] .rows [rowindex] .cells [ 1 ].innerText; var memberRoles = grid [gridindex] .rows [rowindex] .cells [ 2 ].innerText; var 成员任务= grid [gridindex] .rows [rowindex] .cells [ 3 ].innerText; var memberOperations = grid [gridindex] .rows [rowindex] .cells [ 4 ].innerText; var memberAuthorizations = grid [gridindex] .rows [rowindex] .cells [ 5 ].innerText; var memberAttributes = grid [gridindex] .rows [rowindex] .cells [ 6 ].innerText; var 项名= grid [gridindex] .rows [rowindex] .cells [ 7 ].innerText; // 生成复选框 } } } }

(".AutorisationGrid"); if (grid.length > 0) { for (gridindex = 0; gridindex < grid.length; gridindex++) { if (grid[gridindex].rows.length > 0) { for (rowindex = 0; rowindex < grid[gridindex].rows.length; rowindex++) { var itemId = grid[gridindex].rows[rowindex].cells[0].innerText; var description = grid[gridindex].rows[rowindex].cells[1].innerText; var memberRoles = grid[gridindex].rows[rowindex].cells[2].innerText; var membertasks = grid[gridindex].rows[rowindex].cells[3].innerText; var memberOperations = grid[gridindex].rows[rowindex].cells[4].innerText; var memberAuthorizations = grid[gridindex].rows[rowindex].cells[5].innerText; var memberAttributes = grid[gridindex].rows[rowindex].cells[6].innerText; var itemname = grid[gridindex].rows[rowindex].cells[7].innerText; // generate checkboxes } } } }

进行以下QUERY查询可以一次为我提供所有行的所有列，但我无法分辨一行从何处结束，另一行从何处开始，这是我的真正问题，因此有一种方法可以访问所有网格，网格中的所有行，然后是所有列，所以我知道一行从哪里结束，另一行从哪里开始?

Doing the following QUery gives me all the columns for all the rows at once but I can''t tell where one row ends and another starts, which is my real problem, so is there a way to access all the grids, all the rows in the grids and then all the columns so I know where one row ends and another begins?

var rowDataItems =

(" .roledataItem")； for (i = 0 ; i >< rowDataItems.length; i ++){ 开关(rowDataItems [i] .dataFld){ 案例 " : var roleItemId = rowDataItems [i] .innerText; break ; 案例 " : var roleMemberRoles = rowDataItems [i] .innerText; break ; 案例 " : var roleMemberTasks = rowDataItems [i] .innerText; break ; 案例 " : var roleMemberOperations = rowDataItems [i] .innerText; break ; 大小写 " : var roleItemName = rowDataItems [i] .innerText; break ; 案例 " : var roleItemDescription = rowDataItems [i] .innerText; break ; 案例 " : var roleMemberAuthorizations = rowDataItems [i] .innerText; break ; 案例 " : var roleMemberAttributes = rowDataItems [i] .innerText; break ; } }

(".roledataItem"); for (i = 0; i < rowDataItems.length; i++) { switch (rowDataItems[i].dataFld) { case "ItemId": var roleItemId = rowDataItems[i].innerText; break; case "MemberRoles": var roleMemberRoles = rowDataItems[i].innerText; break; case "MemberTasks": var roleMemberTasks = rowDataItems[i].innerText; break; case "MemberOperations": var roleMemberOperations = rowDataItems[i].innerText; break; case "Name": var roleItemName = rowDataItems[i].innerText; break; case "ItemDescription": var roleItemDescription = rowDataItems[i].innerText; break; case "MemberAuthorizations": var roleMemberAuthorizations = rowDataItems[i].innerText; break; case "MemberAttributes": var roleMemberAttributes = rowDataItems[i].innerText; break; } }

因此，有了这个，我在所有行上拥有了所有列.我如何重新格式化jQuery以获取所需的内容?

So with this I have all the columns over all the rows. How do I reformat the jQuery to get what I want?

请查看呈现的输出，因为JQuery与HTML DOM一起使用.一旦有了元素，例如

Look at the rendered output, since JQuery works with the HTML DOM. Once you have an element, such as

这篇关于是否有一个JQuery解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！