faqts : Computers : Programming : Languages : JavaScript : Tables

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

250 of 271 people (92%) answered Yes
Recently 8 of 10 people (80%) answered Yes

Entry

How do you make a table cell editable (onclick)?
How do you make a table cell editable (onclick)?
I find here this entry very useful (editing table cells onclick), now I want this same functionalit
This is a GREAT script! Anyone know how to modify it so that the font color changes after editing a
How can i save the editted row to a variable string (rownum,col1,col2,col3\n)

Nov 23rd, 2008 01:27
kaka vijes, i can do it, Magnus Gudmundsson, Martin Honnen, Sachin S, william baney, felix norambuena,


IE4+ and NN6:
The following replaces the cell content onclick with an INPUT 
TYPE="text" element to allow editing of the table cell content.
<HTML>
<HEAD>
<STYLE>
.js {
  color: white;
  background-color: orange;
}
</STYLE>
<SCRIPT>
//added ONBLUR, cuz without that, u would recive an error if u had not
// edited the value in the input box
// Magnus Gudmundsson
function editCell (cell) {
  if (document.all) {
    cell.innerHTML =
      '<INPUT ' +
      ' ID="editCell"' +
      ' ONCLICK="event.cancelBubble = true;"' + 
      ' ONCHANGE="setCell(this.parentElement, this.value)" ' +
      ' ONBLUR="setCell(this.parentElement, this.value)" ' +
      ' VALUE="' + cell.innerText + '"' +
      ' SIZE="' + cell.innerText.length + '"' +
      '>';
    document.all.editCell.focus();
    document.all.editCell.select();
  }
  else if (document.getElementById) {
    cell.normalize();
    var input = document.createElement('INPUT');
    input.setAttribute('value', cell.firstChild.nodeValue);
    input.setAttribute('size', cell.firstChild.nodeValue.length);
    input.onchange = function (evt) { setCell(this.parentNode, 
this.value); };
    input.onclick = function (evt) { 
      evt.cancelBubble = true;
      if (evt.stopPropagation)
        evt.stopPropagation();
    };
    cell.replaceChild(input, cell.firstChild);
    input.focus();
    input.select();
  }
}
function setCell (cell, value) {
  if (document.all)
    cell.innerText = value;
  else if (document.getElementById)
    cell.replaceChild(document.createTextNode(value), cell.firstChild);
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD ONCLICK="editCell(this);">
Kibology
</TD>
<TD ONCLICK="editCell(this);">
42
</TD>
<TD CLASS="js" ONCLICK="editCell(this)">
JavaScript.FAQTs.com
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
http://www.stupidarticles.com
http://www.halazona.com
http://www.shikapika.com
http://www.stakoza.com
http://www.uploadarticles.com
http://www.ganazat.com
http://www.damima.com
http://www.tarabiza.com
http://www.articlesxarticles.com
http://www.articlesfreedirectory.com
http://viaggioinghilterrascozia.blogspot.com/
http://guia-de-saude.blogspot.com/
http://viajaringlaterraescocia.blogspot.com/
http://reisechile.blogspot.com/
http://reiserenglandscotland.blogspot.com/
http://reisesingapurbangkok.blogspot.com/
http://reiseaustralien.blogspot.com/