Edit Table Cell in Place

Let's create a function that will get a reference to a table cell as a parameter, and make the table cell editable. In other words, create Edit In Place. Our function will be very simple, and use only standard DOM methods. It will be called by clicking on the table cell.

 function makeEditable(el){
 }

The el variable will hold a reference to a table cell. Normally, a table cell will have one childNode - the text element. First we check whether this is the first click on the table cell:

  if(el.firstChild.nodeName !="INPUT"){
  }

If it is so, we create an input element:

 var input = document.createElement("INPUT");

Assign the value of the cell text to the input element and set different background:

 input.value = el.firstChild.nodeValue;
   input.style.background = "rgb(255,244,255)";

Turn autocomplete off to avoid the 'Permission denied to set property XULElement.selectedIndex' error in Firefox.

 input.setAttribute('autocomplete','off');

Replace the text with the input element we just created and set focus on it:

  el.replaceChild(input, el.firstChild);
  el.firstChild.select();
  el.firstChild.focus();

To turn the input element back into text, we'll do the reverse procedure - create a text node, and replace the input element with text:

 var text= document.createTextNode(el.firstChild.value);
 el.replaceChild(text, el.firstChild);

The function will called from a cell element as follows:

onclick=makeEditable; 

Once a user turned the input back into text, you could apply various Ajax techniques to save the modified text on the server.

Here is the full function listing:

function makeEditable(){
 var el = this;
 if(el.firstChild.nodeName !="INPUT"){
   var input = document.createElement("input");
    input.value = el.firstChild.nodeValue;
    input.setAttribute('autocomplete','off');
    input.style.background = "rgb(255,244,255)";
    el.replaceChild(input, el.firstChild);
    el.firstChild.select();
    el.firstChild.focus();
   }
   else{
    var text= document.createTextNode(el.firstChild.value);
  el.replaceChild(text, el.firstChild);
   }
 }

When the makeEditable function is called from a table cell, the keyword this in the function refers to the table cell element.

Unobtrusive JavaScript

There is a way to attach a function to the onclick event in each table cell without having to write inline code. Here is how to do it:

function addEventHandlers() {
  //the table should have an id
  var table = document.getElementById('example');
  var tds = table.getElementsByTagName('td');
  for(var i=0; i< tds.length; i++){
   //no brackets after the function name
   tds[i].onclick = makeEditable;
   tds[i].title = 'Click to edit';
  }
}

The last step is to make sure this function is called after a page has loaded:

window.onload = addEventHandlers;

-->

Related posts:

How to Change HTML Table Cell Value

Hide Columns in a Table