nicht angemeldet
Tabellen editieren in verschiedenen Browsern
Hallo zusammen,
in folgendem Javascript sollte es möglich sein, nach dem hinzufügen einer neuer Zeile diese durch einen Klick darauf zu editieren.
Wunderbar funktioniert dies in dem Firefox2.
Im Internetexplorer ist das editieren und speichern möglich. Jedoch kann danach der Text nicht mehr editiert werden - was eigentlich gehen sollte.
Im Firefox 3 funktioniert das Speichern überhaupt nicht. (vermutlich geht das wiederholte (td).innerHTML nicht) ?
Irgendwie bin ich hier überfragt was hier falsch ist.
Vielleicht kann mir jemand weiterhelfen?
Thonix
Der code:
<html>
<head>
<script type="text/javascript">
function insRow(){
// Add row to the end
var table=document.getElementById('myTable').insertRow(-1);
// Add cells
var y=table.insertCell(0);
var z=table.insertCell(1);
// Generate unique IDs
y_id = uid();
z_id = uid();
// Add text to the cells
y.innerHTML="<span id='"+y_id+"' onclick=editCelltoText('"+y_id+"')> NEW CELL1</span>";
z.innerHTML="<span id='"+z_id+"' onclick=editCelltoText('"+z_id+"')> NEW CELL2</span>";
//y.onclick = "editCelltoText('"+y_id+"')";
//z.onclick = "editCelltoText('"+z_id+"')";
}
// Function to make the cell editable with a textbox
function editCelltoText(id){
// Add shortcut to the cell
cell = document.getElementById(id);
// Cell text
// Textfield
celltext = "<input type='text' size='50' id='xx_"+id+"_text' value='"+cell.innerHTML+"'>";
// OK Button
celltext += "<input type='button' value='OK' onclick=editTexttoCell('"+id+"')>";
// Set cell text
cell.innerHTML = celltext;
// Disable onclick method
cell.attributes["onclick"].value = "";
}
// Function move from the textbox to a normal table cell
function editTexttoCell(id){
// Add shortcut to the cell
cell = document.getElementById(id);
// Cell text
// Textfield
celltext = document.getElementById("xx_"+id+"_text").value;
// Set cell text
//cell.innerHTML = "";
cell.bgColor = "#FFCCCC";
cell.innerHTML = celltext;
// Set onclick method
cell.attributes["onclick"].value = "editCelltoText('"+id+"')";
cell.onclick = "editCelltoText('"+id+"')";
}
var uid = (
function() {
var id=0;
return function(){
return id++;
};
}
)();
</script>
</head>
<body>
<table id="myTable" border="1">
<tr><td>Table Header 1</td><td>Table Header 2</td></tr>
</table>
<br />
<input type="button" onclick="insRow()" value="Insert row for change">
</body>
</html>
-
// Set onclick method
cell.attributes["onclick"].value = "editCelltoText('"+id+"')";
cell.onclick = "editCelltoText('"+id+"')";Die Methode onclick wird als Funktion aufgerufen. Firefox ist übertrieben gutmütig, diesen Aufruf per String-Übergabe trotzdem umzusetzen, der IE verhält sich ausnahmsweise einmal korrekt.
Richtig müßte es heißen:
cell.onclick = function(id) { return function() { editCelltoText(id); }}(id);Beachte insbesondere die Closure (Verkapselung der Funktion), damit id korrekt übergeben werden kann, denn ansonsten kann es passieren, dass die Variable innerhalb der Funktion nicht referenziert werden kann. Eleganter wäre jedoch auf Dauer die Verwendung von "this".
Lese Dich in Objektorientierung bei JavaScript ein und nutze sie zu Deinem Vorteil. Dann kannst Du evtl. auch die Zellen mit modernen DOM-Aufrufen erstellen (bitte den tbody nicht vergessen, sonst mag IE nicht).
Gruß, LX
--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes-
Die Methode onclick wird als Funktion aufgerufen. Firefox ist übertrieben gutmütig, diesen Aufruf per String-Übergabe trotzdem umzusetzen, der IE verhält sich ausnahmsweise einmal korrekt.
Lediglich die Version 2 der Firefox spielt da mit. Die Version 3 lässt mich den Zelleninhalt nicht nochmals überschreiben:
// Add shortcut to the cell cell = document.getElementById(id); // Cell text // Textfield celltext = document.getElementById("xx_"+id+"_text").value; // Set cell text cell.bgColor = "#FFCCCC"; cell.innerHTML = celltext;Anstelle der Zelle wird der Text > celltext < nicht in die Zelle, sondern in das Textfeld eingetragen. Die bgColor wird wiederum Richtig für die Zelle gesetzt.
Hat dies was mit der Verschachtelung zu tun ?Richtig müßte es heißen:
cell.onclick = function(id) { return function() { editCelltoText(id); }}(id);Beachte insbesondere die Closure (Verkapselung der Funktion), damit id korrekt übergeben werden kann, denn ansonsten kann es passieren, dass die Variable innerhalb der Funktion nicht referenziert werden kann. Eleganter wäre jedoch auf Dauer die Verwendung von "this".
Mit diesem Code funktioniert nun auch der IE - wie genau sich die erkapselung der Funktion zusammensetzt werde ich zu verstehen noch mal nachlesen.
Lese Dich in Objektorientierung bei JavaScript ein und nutze sie zu Deinem Vorteil. Dann kannst Du evtl. auch die Zellen mit modernen DOM-Aufrufen erstellen (bitte den tbody nicht vergessen, sonst mag IE nicht).
Wo finde ich etwas über die modernen DOM-Aufrufe ?
Kennst du evtl. hierfür eine schöne "einlese" Doku?Danke
Thonix-
Zum Fehler in FF3: Installiere Dir Firebug und schau nach, welche IDs und Funktionen tatsächlich übergeben wurden.
Lesestoff: Lese Dir am Besten die JavaScript-Kapitel in SelfHTML durch, insbesondere die Objektreferenz über HTML-Nodes. Berücksichtige dabei, dass Du, um tr/td-Elemente im MSIE hinzufügen zu können, diese in ein tbody-Element stecken mußt, sonst mag es dieser Browser nicht.
Gruß, LX
--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes
-
-