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