Show/hide table rows per click

**Foundas** · 10-22-2012, 08:30 PM

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

**vwphillips** · 10-23-2012, 11:04 AM

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>

**Foundas** · 10-23-2012, 11:17 AM

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>