javascript - 使用 jQuery 在 div 中查找 GridView 控件

Question

GridView :

<asp:GridView ID="gvParentGrid" runat="server" DataKeyNames="dc_code" Width="100%"
    OnRowCommand="gvParentGrid_RowCommand" AutoGenerateColumns="false"
    OnRowDataBound="gvParentGrid_RowDataBound" OnRowCreated="gvParentGrid_RowCreated"
    GridLines="None" BorderStyle="Solid" BorderWidth="1px" BorderColor="#df5015">
<HeaderStyle BackColor="#0080ff" Font-Bold="true" ForeColor="White" />
<RowStyle BackColor="#E1E1E1" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField ItemStyle-Width="20px">
  <ItemTemplate>
    <a href="JavaScript:divexpandcollapse('div<%# Eval(" dc_code ") %>');">
    <img id='imgdiv<%# Eval("dc_code") %>' width="9px" border="0" src="../Images/plus.gif" alt="" /></a>
  </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="SNo">
  <ItemTemplate>
    <%#Container.DataItemIndex+1 %>
  </ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="dc_code" HeaderText="dc_code" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="zone" HeaderText="Zone" HeaderStyle-HorizontalAlign="Left" />
<asp:TemplateField ItemStyle-Width="20px" HeaderText="Value">
  <ItemTemplate>
    <%--<a href="JavaScript:SetLeadDay('div<%# Eval(" dc_code ") %>');"></a>--%>
      <asp:TextBox ID="txtgvZValue" runat="server" Width="60px" Text='<%# Bind("value") %>' onkeypress="return onlyNumbers(this);" MaxLength="3"></asp:TextBox>
  </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ItemStyle-Width="75px" ControlStyle-Width="75px" ItemStyle-HorizontalAlign="Center">
  <ItemTemplate>
    <asp:Button ID="btngvZApply" runat="server" Text="Apply" Width="75px" CommandArgument='<%# Eval("dc_code") %>' CommandName="Apply" />
  </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
  <ItemTemplate>
    <tr>
      <td colspan="98%">
        <div id='div<%# Eval("dc_code") %>' style="display: none; position: relative; left: 15px; overflow: auto">
          <asp:GridView ID="gvChildGrid" runat="server" AutoGenerateColumns="false" BorderStyle="Double"
              BorderColor="#df5015" OnRowCommand="gvChildGrid_RowCommand" OnRowCreated="gvChildGrid_RowCreated" GridLines="None"
              Width="98%" OnRowDataBound="gvChildGrid_RowDataBound">
            <HeaderStyle BackColor="#0080ff" Font-Bold="true" ForeColor="White" />
            <RowStyle BackColor="#E1E1E1" />
            <AlternatingRowStyle BackColor="White" />
            <Columns>
              <asp:TemplateField ItemStyle-Width="20px">
                <ItemTemplate>
                  <a href="JavaScript:divexpandcollapse('divG<%# Eval(" family ") %>');">
                  <img id='imgdivG<%# Eval("family") %>' width="9px" border="0" src="../Images/plus.gif" alt="" /></a>
                </ItemTemplate>
              </asp:TemplateField>
              <asp:TemplateField HeaderText="SNo">
                <ItemTemplate>
                  <%#Container.DataItemIndex+1 %>
                </ItemTemplate>
              </asp:TemplateField>
              <asp:BoundField DataField="family" HeaderText="family" HeaderStyle-HorizontalAlign="Left" />
              <asp:BoundField DataField="familyValue" HeaderText="familyValue" HeaderStyle-HorizontalAlign="Left" />
              <asp:TemplateField ItemStyle-Width="20px" HeaderText="Value">
                <ItemTemplate>
                  <asp:TextBox ID="txtgvGValue" runat="server" Width="60px" Text='<%# Bind("value") %>' onkeypress="return onlyNumbers(this);" MaxLength="3"></asp:TextBox>
                </ItemTemplate>
              </asp:TemplateField>
              <asp:TemplateField HeaderText="Action">
                <ItemTemplate>
                  <asp:Button ID="btngvGApply" runat="server" Text="Apply" Width="75px" />
                </ItemTemplate>
              </asp:TemplateField>
              <asp:TemplateField>
                <ItemTemplate>
                  <tr>
                    <td colspan="98%">
                      <div id='divG<%# Eval("family") %>' style="display: none; position: relative; left: 15px; overflow: auto">
                        <asp:GridView ID="gvSupplier" runat="server" AutoGenerateColumns="false" BorderStyle="Double"
                            BorderColor="#df5015" OnRowCreated="gvSupplier_RowCreated" GridLines="None" Width="98%">
                          <HeaderStyle BackColor="#0080ff" Font-Bold="true" ForeColor="White" />
                          <RowStyle BackColor="#E1E1E1" />
                          <AlternatingRowStyle BackColor="White" />
                          <Columns>
                            <asp:TemplateField HeaderText="SNo">
                              <ItemTemplate>
                              </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="supplierCode" HeaderText="supplierCode" HeaderStyle-HorizontalAlign="Left" />
                            <asp:BoundField DataField="supplierName" HeaderText="supplierName" HeaderStyle-HorizontalAlign="Left" />
                            <asp:TemplateField ItemStyle-Width="20px" HeaderText="Value">
                              <ItemTemplate>
                                <asp:TextBox ID="gvSValue" runat="server" Width="60px" Text='<%# Bind("value") %>' onkeypress="return onlyNumbers(this);" MaxLength="3"></asp:TextBox>
                              </ItemTemplate>
                            </asp:TemplateField>
                          </Columns>
                        </asp:GridView>
                      </div>
                    </td>
                  </tr>
                </ItemTemplate>
              </asp:TemplateField>
            </Columns>
          </asp:GridView>
        </div>
      </td>
    </tr>
  </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

JavaScript:

function divexpandcollapse(divname) {
    alert(divname);
    var div = document.getElementById(divname);
    var img = document.getElementById('img' + divname);

    if (div.style.display == "none") {
        div.style.display = "inline";
        img.src = "../Images/minus.gif";
    } else {
        div.style.display = "none";
        img.src = "../Images/plus.gif";
    }
}

在该 JavaScript 函数中，我传递了 div ID。通过使用div ID，我想找到放置在相应div标签内的GridView。

在这里，我将找到网格，然后通过循环将值分配给其列之一。

如何找到div后面的网格？

Answer 1

使用 JQuery .map() 函数获取 DIV 内的所有子 DIV ID - JQuery 通过 ID 获取子元素。

标记

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Get All The Child DIV IDs Inside a DIV Using Jquery Methods</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js">
        </script>

    <!--STYLE IT-->
    <style> 
        * {font:13px Arial;}
    </style>

</head>
<body>
        <!--THE PARENT AND CHILD ELEMENTS-->
        <div id="Container">
            <div id="Div1"></div>
            <div id="Div2"></div>
        </div>

        <!--DISPLAY THE CHILD DIV's-->
        <div id="showChild"></div>
</body>

脚本

<script>
    $(document).ready(function() {
        // COUNT NUMBER OF CHILD DIV'S.
        $('#showChild').append('Found <b>' + $('#Container > div').length + 
            '</b> child DIV elements <br />');

        // SHOW THE CHILD DIV'S.
        $('#Container > div').map(function() {
            $('#showChild').append(this.id + '<br />');
        });
    });
</script>
</html>