CoderZone.org

Category: >> JavaScript >> Click to edit Table Cell Bookmark and Share

<< lastnext >>

Snippet Name: Click to edit Table Cell

Description: Click to edit a table cell inline.

Comment: (none)

Author: CoderZone
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>
 
There haven't been any comments added for this snippet yet. You may add one if you like.  Add a comment 
© coderzone.org | users online: 13