divタグを表示/非表示javascript

Question

私はサーバーから大量のテキストを取得するgridview列を持っています。そのため、グリッドが読み込まれた後でそのテキストをすべて表示するのではなく、ユーザーが展開リンクをクリックして折りたたみリンクで閉じた場合にのみ表示します。ここに私が持っているものがあります。 私はすでに、両方のJavaScript関数を1つにまとめることができることを知っています。今は2つの別々の機能でテストしています。

<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

各行に固有のIDを使用する必要があります。 IDはページ内の1つの要素にのみ適用でき、コードはテーブルのこの大きな列のすべてのインスタンスに1つの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"; 
    } 
} 

Answer 2

問題は、繰り返しの要素を持っているので、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> 

注：これらの関数では、DOMをトラバースしやすくするためにjQueryを使用しています。独自の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(); 
}