Question

我有一个gridview列，它从服务器获取大量文本。因此，不是在网格加载后显示所有文本，而是仅在用户单击“展开”链接时显示该文本，然后使用折叠链接将其关闭。这就是我所拥有的。 请注意我已经知道我可以将两个javascript函数合二为一;我现在正在测试两个独立的功能。

<script type="text/javascript" language="javascript" >
function hidelink() {
    var col = $get('col');
    var exp = $get('exp');
    col.style.display = 'none';
    exp.style.display = '';

}
function showlink(){
    var col = $get('col');
    var exp = $get('exp');
   col.style.display = '';
   exp.style.display = 'none';
}

<asp:GridView ID="GridView2" Width="400px" runat="server" AutoGenerateColumns="False"   
AllowPaging ="True"
BackColor="White" BorderColor="#999999" 
BorderStyle="None" BorderWidth="1px" 
CellPadding="3" DataKeyNames="APPID" 
DataSourceID="SqlDataSource3" 
PagerSettings-Mode="NextPreviousFirstLast"                EnableSortingAndPagingCallbacks="True">

<PagerSettings Mode="NextPreviousFirstLast" />

 <RowStyle BackColor="#EEEEEE" ForeColor="Black" />
 <Columns>
 <asp:BoundField DataField="stuff" HeaderText="Name" ReadOnly="True" 
 SortExpression="app" />
 <asp:BoundField DataField="Description" HeaderText="Short Descr" 
 ReadOnly="True" SortExpression="des" />
 <asp:TemplateField HeaderText="Long Descr" SortExpression="data">
 <EditItemTemplate>
 <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("data") %>'></asp:TextBox>
 </EditItemTemplate>
 <ItemTemplate>
 <div id="col">
 <asp:LinkButton ID="expand" runat="server" OnClientClick ="hidelink();return false;">Expand</asp:LinkButton>  
  </div>
  <div id="exp" style="display:none">
  <asp:LinkButton ID="collapse" runat="server" OnClientClick ="showlink();return false;">Collapse</asp:LinkButton>  
   </div>
  <asp:Panel ID="Panel1" runat="server" >
  <table>
    <tr>
        <td>                                                                     <%#Eval("LongDescription")%>
        </td>
     </tr>
  </table>

我的问题是只有第一条记录可以完成所有应有的操作。（展开/折叠）但其他行只展开，不会隐藏div标签中的展开链接。它只查找第一行的id，因为当在任何其他行上按下展开按钮时，它会更改第一行以显示折叠链接。我该如何解决这个问题？

Answer 1

问题是因为你有重复的元素，所以DIV的id正在被重用。这在HTML中是非法的。每个元素的id属性必须是唯一的。处理它的一种更好的方法是将对当前元素的引用传递给处理程序，并让它通过遍历DOM派生它需要操作的元素。

<div>
   <asp:LinkButton ID="expand" runat="server" OnClientClick ="hidelink(this);return false;">Expand</asp:LinkButton>
</div>
<div style="display:none">
   <asp:LinkButton ID="collapse" runat="server" OnClientClick ="showlink(this);return false;">Collapse</asp:LinkButton>
</div>

注意：我在这些函数中使用jQuery，因为它可以更容易地遍历DOM。您可以使用自己的DOM遍历函数并根据需要设置样式属性。

function hidelink(ctl) {
    var myDiv = $(ctl).closest('div');
    myDiv.hide();
    myDiv.next('div').show();
}

function showlink(ctl){
    var myDiv = $(ctl).closest('div');
    myDiv.hide();
    myDiv.prev('div').show();
}

Answer 2

您需要为每一行使用唯一ID。 ID只能应用于页面中的一个元素，而您的代码正在将一个ID应用于表中此大型列的所有实例。

或者，您可以使用DOM方法找到要显示/隐藏的正确元素。例如：

<div>
  <a href="#" onclick="showHideDesc(this); return false;">Expand</a>
  <table style="display: none;">
    <tr>
      <td><%#Eval("LongDescription")%></td>
    </tr>
  </table>
</div>

然后为你的剧本：

function showHideDesc(link) {
    var table = link.parentNode.getElementsByTagName("TABLE")[0];
    if (table.style.display == "none") {
        table.style.display = "";
        link.innerHTML = "Collapse";
    }
    else {
        table.style.display = "none";
        link.innerHTML = "Expand";
    }
}

显示/隐藏div标签javascript

2 个答案: