Toggle row with javascript in asp

Posted on 2004-10-29
Last Modified: 2012-06-27
The following code should toggle an additional row for each record.  However it only toggles the first row.  If I check the checkbox on any record, the first record toggles only.

   <script language="JavaScript">

    function toggle(target)
         obj=document.getElementById(target); ('none') ? '' : 'none');

<input style="display:inline" type="checkbox" onClick="toggle('therow')" id=checkbox1 name=checkbox1>

      <tr  id="therow" style="display:none" bgcolor="<%= bgcolor %>">
<td colspan="9"><span class="aspmaker"><%=SubjectLine%></span>&nbsp;</td>


      End If
Question by:Insomniac_PhD
    LVL 33

    Accepted Solution

    You have to generate your tr id  dynamically. You are referencing the row as therow. But when you have multiople rows
    the name for each row has to be distinct. like
         <tr  id="therow" style="display:none" bgcolor="<%= bgcolor %>"> </tr>
         <tr  id="therow1" style="display:none" bgcolor="<%= bgcolor %>"></tr>
         <tr  id="therow2" style="display:none" bgcolor="<%= bgcolor %>"></tr>.
    As of now you are just calling toggle('therow') which will fire only for the first row
    Also i presume the checkbox will be on each row ?

    LVL 3

    Author Comment

    yes. the checkbox is on the row above in each record.
    LVL 33

    Expert Comment

    Your checkboxes should look like this
    <input style="display:inline" type="checkbox" onClick="toggle('therow')" id=checkbox1 name=checkbox1>
    <input style="display:inline" type="checkbox" onClick="toggle('therow1')" id=checkbox1 name=checkbox1>
    <input style="display:inline" type="checkbox" onClick="toggle('therow2')" id=checkbox1 name=checkbox1>
    Since you will be dynamically creating the table row id <tr id = "throw"+i>
    you just need to pass the same dynamic value  to onClick="toggle("
    LVL 3

    Author Comment

    Got it!  I just used the record key as the dynamic reference.

    LVL 33

    Expert Comment

    Thanks for the points and grade

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Suggested Solutions

    I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:  The Exchange of information …
    I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
    Need more eyes on your posted question? Go ahead and follow the quick steps in this video to learn how to Request Attention to your question. *Log into your Experts Exchange account *Find the question you want to Request Attention for *Go to the e…
    To add imagery to an HTML email signature, you have two options available to you. You can either add a logo/image by embedding it directly into the signature or hosting it externally and linking to it. The vast majority of email clients display l…

    884 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now