Snippet Name: Click to edit Table Cell
Description: Click to edit a table cell inline.
Comment: (none)
Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: February 27th, 2009
|
<html>
<head></head>
<body bgcolor="#ffffff">
<style>
.nbb
{
border:none;
background:none;
margin:0;
padding-left:5px;
}
.bb
{
border:normal;
background:normal;
margin-top:-11;
margin-left:-3;
padding-left:5px;
position:absolute;
}
</style>
<script language="javascript">
FUNCTION put_contents(id)
{
document.getElementById(id).readOnly = FALSE;
document.getElementById(id).className = "bb";
document.getElementById(id).FOCUS();
document.getElementById(id).select();
}
FUNCTION restore_it()
{
document.getElementById("in4").readOnly = TRUE;
document.getElementById("in4").className = "nbb";
document.getElementById("in8").readOnly = TRUE;
document.getElementById("in8").className = "nbb";
document.getElementById("in12").readOnly = TRUE;
document.getElementById("in12").className = "nbb";
}
</script>
NOTE: Only the 4th column in this example is editable.
<form method="POST">
<table border=1 cellpadding=0 cellspacing=0>
<tr>
<td onclick="restore_it();"><input class="nbb" id="in1" value="Row 1 Colom 1" readonly></td>
<td onclick="restore_it();"><input class="nbb" id="in2" value="Row 1 Colom 2" readonly></td>
<td onclick="restore_it();"><input class="nbb" id="in3" value="Row 1 Colom 3" readonly></td>
<td bgcolor="#ffffdd" ondblclick="put_contents('in4');" onclick="restore_it();"><input class="nbb" name="in4" id="in4" value="Test data 4" readonly></td>
</tr>
<tr>
<td onclick="restore_it();"><input class="nbb" id="in5" value="Row 2 Colom 1" readonly></td>
<td onclick="restore_it();"><input class="nbb" id="in6" value="Row 2 Colom 2" readonly></td>
<td onclick="restore_it();"><input class="nbb" id="in7" value="Row 2 Colom 3" readonly></td>
<td bgcolor="#ffffdd" ondblclick="put_contents('in8');" onclick="restore_it();"><input class="nbb" name="in8" id="in8" value="Test data 8" readonly></td>
</tr>
<tr>
<td onclick="restore_it();"><input class="nbb" id="in9" value="Row 3 Colom 1" readonly></td>
<td onclick="restore_it();"><input class="nbb" id="in10" value="Row 3 Colom 2" readonly></td>
<td onclick="restore_it();"><input class="nbb" id="in11" value="Row 3 Colom 3" readonly></td>
<td bgcolor="#ffffdd" ondblclick="put_contents('in12');" onclick="restore_it();"><input class="nbb" name="in12" id="in12" value="Test data 12" readonly></td>
</tr>
<tr>
<td colspan=4 style="text-align:center;padding:5px;" onclick="restore_it();"><input type="submit" name="submit" value="Submit"></td>
</tr>
</table>
</form>
</body></html> |
