<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>rolly</title>
<!-- The desired performance for this gem would be to:
1. click on table cells
2. edit in INPUT
3. click away, data presented in table cell.
2.0 The table cells have hover highlighting.
**** Problem: IE
When INPUT is switched to display:block through CSS change,
the INPUT will disappear if another hover is activated.
-->
<style type="text/css">
<!--
table.rolly a { display:block;
width:100%;heig ht:100%;backgro und-color:#ccccff}
table.rolly a:link {}
table.rolly a:visited {}
table.rolly a:hover { background-color:#ccffff; }
table.rolly a:active {}
/* ie cluge: makes a clickable inside td */
table.rolly a div {width:100%;hei ght:100%}
/* no hover */
table.rollypaus e a { display:block;
width:100%;heig ht:100%;backgro und-color:#ccccff}
..vis { visibility:visi ble}
input.vis {display:block; }
..hid { visibility:hidd en }
/*
..vis { display: block}
input.vis {display:block; border:double 4px #ff0}
..hid { display: none }
*/
-->
</style>
<script type="text/javascript">
///////////////////
function InpEdOn(A){
/////////////////////
// max 1 INPUT in A
var Inpy = A.getElementsBy TagName("INPUT" )[0];
var Divtext = A.getElementsBy TagName("DIV")[0];
Inpy.className = "vis";
Inpy.value = Divtext.firstCh ild.nodeValue+ " ";
// not working in NN71
Inpy.focus();
Inpy.select();
}
/////////////////////
function InpEdOff(Inp){
/////////////////////
var Divtext = Inp.parentNode. getElementsByTa gName("DIV")[0];
var Tagtxt = new Array();
Inp.className = "hid";
Tagtxt = Inp.value;
Divtext.firstCh ild.nodeValue = Tagtxt.toString ();
}
//-->
</script>
</head>
<body>
<form name="formy" onsubmit="retur n false;">
<table style="width:10 0%" class="rolly" border="5">
<tr><td style="width:33 %">
<div style="display: block; position:relati ve;">
<a href="#nojump" class="vis" onclick="InpEdO n(this)">
<div> </div>
<input type="text" class="hid" style="position :absolute;
top:150px;left: 150px;height:2e m"
onblur="InpEdOf f(this)"/>
</a>
</div>
</td>
<td><a href="#nojump"> <div>1-2</div></a></td>
<td><a href="#nojump"> <div>1-3</div></a></td>
</tr>
<tr><td><a href="#nojump"> <div>2-1 </div></a></td>
<td><a href="#nojump"> <div>2-2</div> </a></td>
<td><a href="#nojump"> <div>2-3</div> </a></td>
</tr>
</table>
</form>
<div>1-1</div>
</body>
</html>
</body>
