Javascript  »  DHTML  »  editierbare Zellen

zur Übersicht

Kategorie	DHTML
Bezeichnung	editierbare Zellen
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	19892 Aufrufe davon 16x gestern
Klicken Sie in eine der Zellen dieser Tabelle und editieren den Text. Das Script läuft ab IE4 und NN6
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <SCRIPT> function editCell (cell) { if (document.all) { cell.innerHTML = '<INPUT ' + ' ID="editCell"' + ' ONCLICK="event.cancelBubble = true;"' + ' ONCHANGE="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> <TABLE BORDER="1"> <TR> <TD ONCLICK="editCell(this);"> jsunity </TD> <TD ONCLICK="editCell(this);"> erstaunt </TD> <TD ONCLICK="editCell(this)"> immer wieder </TD> </TR> </TABLE>

Kommentare zu editierbare Zellen

2 Kommentar(e) vorhanden / Anzeige der neuesten 5

am 01.10.2005 um 17:14 Uhr von Urs Widmer
Das Skript wäre perfekt, wenn es als dauerhaftes Cookie gespeichert würde!... 

am 30.09.2005 um 15:46 Uhr von sinun
Das wäre ein Super-Skript, wenn der Text als Cookie gespeichert bliebe.... 


Alle Kommentare anzeigen   -   Kommentar hinzufügen