div-Tag anzeigen/ausblenden Javascript

Question

Ich habe eine Gridview-Spalte, die eine große Menge an Text vom Server erhält. Anstatt den gesamten Text nach dem Laden des Gitters anzuzeigen, möchte ich ihn nur anzeigen, wenn ein Benutzer auf einen Expand-Link klickt und ihn dann mit einem Minimierungslink schließt. Hier ist was ich habe. Bitte beachten Sie, dass ich bereits weiß, dass ich beide Javascript-Funktionen in einem einfügen kann; Ich teste gerade jetzt in zwei separaten Funktionen.

<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> 

Mein Problem ist, dass nur der erste Datensatz alles tut es sollte. (expand/collapse), aber die anderen Zeilen werden nur erweitert und verstecken den Expand-Link im div-Tag nicht. Es wird nur die ID der ersten Zeile gefunden, da die Erweiterungszeile in der ersten Zeile geändert wird, wenn die Maximierungsschaltfläche auf eine andere Zeile trifft. Wie kann ich das beheben?

Answer 1

Sie müssen für jede Zeile eindeutige IDs verwenden. IDs können nur auf ein Element auf der Seite angewendet werden, und Ihr Code wendet eine ID auf alle Instanzen dieser großen Spalte in der Tabelle an.

Alternativ können Sie einfach die DOM-Methoden verwenden, um das richtige Element zum Ein-/Ausblenden zu finden. Zum Beispiel:

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

Dann für Ihr Skript:

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"; 
    } 
} 

Answer 2

Das Problem ist, dass, weil Sie sich wiederholende Elemente, die IDs der DIVs wiederverwendet werden. Dies ist in HTML illegal. Die ID-Eigenschaft jedes Elements muss eindeutig sein. Ein besserer Weg, um damit umzugehen, besteht darin, einen Verweis auf das aktuelle Element an den Handler zu übergeben und es das Element ableiten zu lassen, das es benötigt, um das DOM zu durchlaufen.

Hinweis: Ich verwende jQuery in diesen Funktionen, da es das DOM einfacher zu durchlaufen. Sie können das gleiche mit Ihren eigenen DOM-Traversal-Funktionen und durch Festlegen der Stileigenschaften tun, wenn Sie möchten.

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