Log in

View Full Version : 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
<!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:


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

$("span.hiderow").click(function() {
$("#.showhide:visible:last").hide();
});
});
</script>





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