Crear tabla html editable con javascript

[Naahuel]

Podríamos modificar un poco la función edita() para que tome todo un rango de celdas y no sólo una:

Código Javascript:

<script type="text/javascript">
function modifica() {
  tab=document.getElementById('tabla');
  for (i=0; ele=tab.getElementsByTagName('input')[i]; i++) {
    if (ele.checked) edita(ele);
    ele.checked = false;
  }
}
function edita(obj) {
  padre = obj.parentNode.parentNode;
  celda = padre.getElementsByTagName('td');
  inicio = 2;//celda para comenzar
  fin = 6;//celda para terminar
  
  for(i=inicio;i<fin;i++){
  var celdaTmp = celda[i];
    
  txt = celdaTmp.innerHTML;
  celdaTmp.innerHTML = '';
  inp = celdaTmp.appendChild(document.createElement('input'));
  inp.value=txt;
  inp.onblur = function() { this.parentNode.innerHTML = this.value  }
    
      
  }
}
</script>
 

Tal vez es un poco molesto cómo se cierran cuando pierden foco (aunque a mi me resulta divertido) pero se puede solucionar con una estilización unificando dimensiones de celdas y de los inputs.