Click to edit Table Cell

Submitted by:Pitter Alderson

Date added:09 June, 2014

Category:JavaScript

JavaScript code for click to edit a table cell inline.

Tags: edit table cell , table cell inline

Code Snippet:

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

Comments