我在这里通过教程在ASP.Net中创建了一个嵌套的gridview：http://www.aspsnippets.com/Articles/Nested-GridView-Example-in-ASPNet-using-C-and-VBNet.aspx。 在教程中，jQuery用于显示和隐藏嵌套的gridview。在jQuery中，他使用src属性=加号或减号作为选择器：
<script type="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "./Content/Images/minus2.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "./Content/Images/plus2.png");
$(this).closest("tr").next().remove().fadeOut();
});
我希望能够改为使用类或id作为选择器，例如：
$("#collapserows").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "./Content/Images/minus2.png");
});
$("#collapserows").live("click", function () {
$(this).attr("src", "./Content/Images/plus2.png");
$(this).closest("tr").next().remove();
});
然而，无论出于何种原因，这都行不通。我想要选择的元素是图像：
<img alt="" id="collapserows" style="cursor: pointer" src="Content/Images/plus2.png" />
我认为属性选择器正在选择img元素。不应该引用id也选择img元素并且工作吗？我也尝试了一堂课，没有运气。我希望能够这样做的原因是我可以使用相同的图像来折叠/展开各个嵌套的网格视图，并折叠/展开所有嵌套的网格视图。
非常感谢任何帮助。 感谢。
附加代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NestedGridView.aspx.cs" Inherits="NestedGridView" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/CSS/GridViewStyleSheet.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#collapserows").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "./Content/Images/minus2.png");
});
$("#collapserows").live("click", function () {
$(this).attr("src", "./Content/Images/plus2.png");
$(this).closest("tr").next().remove().fadeOut();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView"
runat="server"
AutoGenerateColumns="false"
AlternatingRowStyle-CssClass="AltRow"
RowStyle-CssClass="Row"
HeaderStyle-CssClass="Header"
OnRowDataBound="GridView_RowDataBound"
DataKeyNames="CustomerID">
<Columns>
<asp:TemplateField HeaderStyle-CssClass="Header">
<HeaderTemplate>
<img alt="" id="collapseallrows" style="cursor: pointer" src="Content/Images/plus2.png" />
</HeaderTemplate>
<ItemTemplate>
<img alt="" id="collapserows" style="cursor: pointer" src="Content/Images/plus2.png" />
<asp:Panel style="display:none" runat="server">
<asp:GridView ID="InnerGridView"
runat="server"
AutoGenerateColumns="false"
Width="100%">
<Columns>
<asp:BoundField DataField="CustomerID" Visible="false"/>
<asp:TemplateField HeaderText="Customer ID" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="CustomerIDLabel" Text='<%# Bind("CustomerID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Employee ID" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="EmployeeIdLabel" Text='<%# Bind("EmployeeID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Freight" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="FreightLabel" Text='<%# Bind("Freight") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ship Name" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ShipNameLabel" Text='<%# Bind("ShipName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ship Address" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ShipAddressLabel" Text='<%# Bind("ShipAddress") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ship City" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ShipCityLabel" Text='<%# Bind("ShipCity") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Postal Code" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ShipPostalCodeLabel" Text='<%# Bind("ShipPostalCode") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ship Country" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ShipCountryLabel" Text='<%# Bind("ShipCountry") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Company Name" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="CompanyNameLabel" Text='<%# Bind("CompanyName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Contact Name" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ContactNameLabel" Text='<%# Bind("ContactName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Contact Title" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ContactTitleLabel" Text='<%# Bind("ContactTitle") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="AddressLabel" Text='<%# Bind("Address") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="CityLabel" Text='<%# Bind("City") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Postal Code" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="PostalCodeLabel" Text='<%# Bind("PostalCode") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Country" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="countryLabel" Text='<%# Bind("Country") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Phone" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="PhoneLabel" Text='<%# Bind("Phone") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
答案 0 :(得分：0)
在文档“准备就绪”之前，无法安全地操作页面。 jQuery为您检测这种准备状态。包含在$（document）.ready（）中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码时才会运行。
欲了解更多信息，请阅读： 的 $( document ).ready()
试试这个：
<img alt="" id="plus" style="cursor: pointer" src="images/plus.png" />
$(document).ready(function () {
$("#plus").live("click", function () {
if ($(this).attr("src")=="images/minus.png")
{
$(this).attr("src", "images/plus.png")
$(this).closest("tr").next().remove();
}
else
{
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");
}
});
});