<html>
<head>
<title>
simple table buttons
</title>
</head>
<body>
<input type = text name="confirmtext">
<table >
<tr>
<td> <input type = button value = "Click" id = "b1" onClick = "document.all.confirmtext.value = 'CLICK1';"><td>Click1 </td>
</tr>
<tr>
<td> <input type = button value = "Click" onClick = "document.all.confirmtext.value = 'CLICK2';"><td>Click2 </td>
</tr>
<tr>
<td> <input type = button value = "Click" onClick = "document.all.confirmtext.value = 'CLICK3';">
<input type = button value = "Click too" onClick = "document.all.confirmtext.value = 'CLICK TOO';">
<td>Click3</td>
</tr>
<tr>
<td> <input type = text value = "Im a text field" ></td>
</tr>
<tr>
<td>An input field and a button in the same cell<br> <input type = text name='same_cell' value = "Click ->" ><input type=button value = "Click To Change <-" onClick = "document.all.same_cell.value = '';" </td>
</tr>
</table>
This table has 3 images in each row. Each is a seperate cell
<table>
<tr>
<td><img src = images/1.gif><td><img src = images/2.gif><td><img src = images/3.gif>
<tr>
<td><img src = images/1.gif><td><img src = images/2.gif><td><img src = images/3.gif>
<tr>
<td><img src = images/1.gif><td><img src = images/2.gif><td><img src = images/3.gif>
</table>
This table has 3 images in each row. They are all in the same cell
<table>
<tr>
<td><img src = images/1.gif><img src = images/2.gif><img src = images/3.gif>
<tr>
<td><img src = images/1.gif><img src = images/2.gif><img src = images/3.gif>
<tr>
<td><img src = images/1.gif><img src = images/2.gif><img src = images/3.gif>
</table>
<style type="text/css">
div.hide { display: none; margin-left: auto; margin-right: auto; }
div.show { display: block; margin-left: auto; margin-right: auto; }
tr.hide { display: none; margin-left: auto; margin-right: auto; }
tr.show { display: block; margin-left: auto; margin-right: auto; }
</style>
<script language=javascript>
function expand_or_shrink_row( row ) {
which_row = 'r' + row;
which_image = 'i' + row;
if ( document.getElementById(which_row).className=='hide' ){
document.getElementById(which_row).className='show';
document.getElementById(which_image).src='images/minus.gif';
}
else {
document.getElementById(which_row).className='hide'
document.getElementById(which_image).src='images/plus.gif'
}
}
</script>
The table below can show or hide its rows. Click the + (or -) to show or hide the row
<table id=show_hide>
<tr><td><img id=i1 width=30 height=30 src = images/plus.gif onClick='javascript:expand_or_shrink_row("1")'>
<tr class = hide id=r1><td>Line 1
<tr><td><img id=i2 width=30 height=30 src = images/plus.gif onClick='javascript:expand_or_shrink_row("2")'>
<tr class = hide id=r2><td>Line 2
<tr><td><img id=i3 width=30 height=30 src = images/plus.gif onClick='javascript:expand_or_shrink_row("3")'>
<tr class = hide id=r3><td>Line 3
<tr><td><img id=i4 width=30 height=30 src = images/plus.gif onClick='javascript:expand_or_shrink_row("4")'>
<tr class = hide id=r4><td>Line 4
<tr><td><img id=i5 width=30 height=30 src = images/plus.gif onClick='javascript:expand_or_shrink_row("5")'>
<tr class = hide id=r5><td>Line 5
</table>
</body>
</html>