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)
Sep 20th, 2001 01:34
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>
