Results 1 to 3 of 3

Thread: Show/hide table rows per click

  1. #1
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default Show/hide table rows per click

    Hello,


    i would like to ask for your help on a function in javascript where user can hide or show rows in a form.
    In the table, i have 10 entries for the user to upload 10 files. Each "file upload" module is named from FILE1 to FILE10.

    Is there a way to show only the first 3 rows and have a button(+) where with every click, the next upload entry appears? and another button(-) to hide a row on each click but not the first 3?


    thanking you in advance

    regards,
    Harry

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    
    function ShowRow(id,min,ud){
     var o=ShowRow['zxc'+id],obj=document.getElementById(id),table=obj.getElementsByTagName('TABLE')[0],ud=typeof(ud)=='number'&&ud<0?-1:1,rows;
     if (obj&&table&&!o){
      rows=table.rows,min=typeof(min)=='number'&&min>0?min:0;
      o=ShowRow['zxc'+id]={
       rows:rows,
       lgth:rows.length-1,
       min:min,
       cnt:min
      }
      row=o.rows[o.cnt];
      obj.style.height=row.offsetTop+row.offsetHeight+'px';
     }
     if (o){
      o.cnt=Math.max(Math.min(o.cnt+ud,o.lgth),o.min);
      obj.style.height=o.rows[o.cnt].offsetTop+o.rows[o.cnt].offsetHeight+'px';
     }
    
    
    
    }
    
    
    </script></head>
    
    <body onload="ShowRow('tst',2,-1);">
    <input type="button" name="" value="Show +1" onmouseup="ShowRow('tst',2,1);" />
    <input type="button" name="" value="Show -1" onmouseup="ShowRow('tst',2,-1);" />
    <div id="tst" style="width:200px;overflow:hidden;height:80px;border:solid red 1px;" >
     <table width="200" border="1">
      <tr>
        <td>Upload 1</td>
      </tr>
      <tr>
        <td>Upload 2</td>
      </tr>
      <tr>
        <td>Upload 3</td>
      </tr>
      <tr>
        <td>Upload 4</td>
      </tr>
      <tr>
        <td>Upload 5</td>
      </tr>
      <tr>
        <td>Upload 6</td>
      </tr>
      <tr>
        <td>Upload 7</td>
      </tr>
      <tr>
        <td>Upload 8</td>
      </tr>
      <tr>
        <td>Upload 9</td>
      </tr>
      <tr>
        <td>Upload 10</td>
      </tr>
     </table>
    </div>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    Foundas (10-23-2012)

  4. #3
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Thank you Vic, your example works like a charm.

    i also played around with jquery and did this:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	$("span.shownextrow").click(function() { 
    	    $("#.showhide:hidden:first").show();
    	});
    
    	$("span.hiderow").click(function() { 
    	    $("#.showhide:visible:last").hide();
    	});
    });
    </script>

    Code:
    <table>
    <tr>
        <td>
            FIXED ROW ALWAYS VISIBLE
        </td>
        </tr>
    
    <tbody class="test" style="display:none">
    <tr>
        <td>
            <input type="text" name="input1"/>First Field
        </td>
        </tr>
        </tbody>
    
    <tbody class="test" style="display:none">
    <tr>
        <td>
            <input type="text" name="input2"/>Second Field
        </td>
        </tr>
    </tbody>
    
    </table>
    <span style="padding-left:20px;" class="shownextrow"><a href="#images">Add Extra Row</a></span>					
    <span style="padding-left:20px;" class="hiderow"><a href="#images">Remove Extra Row</a></span>

Similar Threads

  1. Show table on radio button click.
    By eesyboi in forum JavaScript
    Replies: 1
    Last Post: 02-17-2012, 01:06 AM
  2. XSLT Unique Show/Hide Divs from Table
    By ejeaglesct in forum JavaScript
    Replies: 0
    Last Post: 12-15-2010, 07:40 PM
  3. show table rows (new to js)
    By JohnShell in forum JavaScript
    Replies: 1
    Last Post: 09-09-2010, 06:44 AM
  4. hide all the even rows in a table
    By lord22 in forum JavaScript
    Replies: 7
    Last Post: 08-04-2008, 09:23 AM
  5. Replies: 3
    Last Post: 02-28-2008, 11:30 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •