td in th umwandeln?

[jenz]

Vielleicht kann mit jemand auf die Sprünge helfen. Ich möchte mit JavaScript aus einem TD ein TH zu machen, und natürlich auch umgekehrt.
Ich kenne die Position innerhalb der Tabelle aber irgendwie finde ich keinen schlauen oder einfachen weg, wie ich diese Umwandlungen vollziehen könnte.
Ideen?
cheers
jenz

[Sven Rautenberg]

Moin!

Vielleicht kann mit jemand auf die Sprünge helfen. Ich möchte mit JavaScript aus einem TD ein TH zu machen, und natürlich auch umgekehrt.
Ich kenne die Position innerhalb der Tabelle aber irgendwie finde ich keinen schlauen oder einfachen weg, wie ich diese Umwandlungen vollziehen könnte.

Da der Weg über die einschlägigen DOM-Methoden doch etwas komplizierter ist, zunächst ganz schlicht die Frage: Warum willst du das? Welcher Effekt soll erreicht werden? Wahrscheinlich gibts dann einen einfacheren Weg, der den gleichen Effekt erzielt, aber etwas anderes tut, als du dir gerade vorstellst.

- Sven Rautenberg

[jenz]

Die Frage nach dem Zweck ist natürlich berechtigt. Ich möchte in einem Web-Editor auf JavaScript-Basis die Möglichkeit haben, bei Tabellen Tabellenüberschriften definieren zu können. Im Stile von Zelle, markieren und in ein TH umwandeln.
Die Funktion ist nötig, da ich nicht Tabellen anbieten kann, die per default schon eine ganze Zeile mit th's aufweist.
Hilft das vielleicht weiter?

[Gernot Back]

Hallo jenz,

Die Funktion ist nötig, da ich nicht Tabellen anbieten kann, die per default schon eine ganze Zeile mit th's aufweist.
Hilft das vielleicht weiter?

Da müsstest du freilich auch noch nach Spalten- und nach Zeilen-Überschrift differenzieren, und danach, ob die Leserichtung -je nach Sprache- von links nach rechts oder von rechts nach links ist, was die Sache noch komplizierter macht.

Gruß Gernot

[Sven Rautenberg]

Moin!

Die Frage nach dem Zweck ist natürlich berechtigt. Ich möchte in einem Web-Editor auf JavaScript-Basis die Möglichkeit haben, bei Tabellen Tabellenüberschriften definieren zu können. Im Stile von Zelle, markieren und in ein TH umwandeln.
Die Funktion ist nötig, da ich nicht Tabellen anbieten kann, die per default schon eine ganze Zeile mit th's aufweist.

Ich hätte jetzt auf optische Spielereien getippt - so kann man sich täuschen.

Nun ja, tatsächlich benötigst du das, was du forderst. :)

Mir fallen da zwei Methoden ein:

Erstens kannst du mit den üblichen DOM-Methoden, also z.B. createElement, ein neues TH-Element erstellen, allen Inhalt des alten TD-Elements übertragen, das TD-Element dann löschen und das neue Element an dieser Stelle dann einhängen.

Alternativ besteht vielleicht die Möglichkeit, stattdessen direkt im HTML-Quelltext des Editors zu operieren, was vielleicht auf den Einsatz von innerHTML hinausläuft, oder auf schlichte Textmanipulation in der Textarea.

Und es bestünde ja außerdem die Möglichkeit, erst nachträglich beim Speichern aus dem TD ein TH zu machen. Bei Editieren weist du der TD-Zelle einfach eine extra dafür gedachte CSS-Klasse zu (ich bin sicher, der Editor kann das grundsätzlich machen), die du evtl. eben passend so formatierst, wie dein TH auch aussehen soll, und erst beim Speichern führst du eine Ersetzungsoperation durch.

- Sven Rautenberg

[jenz]

Nun ja, tatsächlich benötigst du das, was du forderst. :)

ja, das fürchte ich eben auch

Mir fallen da zwei Methoden ein:

Erstens kannst du mit den üblichen DOM-Methoden, also z.B. createElement, ein neues TH-Element erstellen, allen Inhalt des alten TD-Elements übertragen, das TD-Element dann löschen und das neue Element an dieser Stelle dann einhängen.

das ist wohl die sauberste variante

Alternativ besteht vielleicht die Möglichkeit, stattdessen direkt im HTML-Quelltext des Editors zu operieren, was vielleicht auf den Einsatz von innerHTML hinausläuft, oder auf schlichte Textmanipulation in der Textarea.

so mit reiner Textmanipulation werde ich wohl ziemliche probleme haben - Gernot's Tipp könnte aber noch ganz nützlich sein.

Und es bestünde ja außerdem die Möglichkeit, erst nachträglich beim Speichern aus dem TD ein TH zu machen. Bei Editieren weist du der TD-Zelle einfach eine extra dafür gedachte CSS-Klasse zu (ich bin sicher, der Editor kann das grundsätzlich machen), die du evtl. eben passend so formatierst, wie dein TH auch aussehen soll, und erst beim Speichern führst du eine Ersetzungsoperation durch.

Das würde dann für dem Moment ein wenig vom Wysiwyg-Prinzip abweichen, aber eben als letzter Nofallplan hinhalten müssen.

vorerst einmal dankeschön

[Gernot Back]

Hallo jenz,

Vielleicht kann mit jemand auf die Sprünge helfen. Ich möchte mit JavaScript aus einem TD ein TH zu machen, und natürlich auch umgekehrt.
Ich kenne die Position innerhalb der Tabelle aber irgendwie finde ich keinen schlauen oder einfachen weg, wie ich diese Umwandlungen vollziehen könnte.
Ideen?

Mir fällt dazu nur outerHTML ein, denn nodeName lässt sich ja leider nur lesen, nicht ändern.

outerHTML  funktioniert aber leider nicht mit allen Browsern.

Gruß Gernot

[Thomas Meinike]

Hallo,

Mir fällt dazu nur outerHTML ein, denn nodeName lässt sich ja leider nur lesen, nicht ändern.

DOM 3 bietet renameNode und wird wohl auch von neueren Mozilla-Browsern implementiert:
alert(document.renameNode), aber mit Elementknoten laeuft da offenbar noch nichts (Bugreport).

Alternativ hilft vielleicht dieser Versuch:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>Test by TM 09/05</title>  
<script language="JavaScript" type="text/javascript">  
<!--  

  
function Test()  
{  
  // vorher  
  alert(document.body.innerHTML);  
  
  var td=document.getElementById("tabzelle");  
  var tdinhalt=td.firstChild.cloneNode(true);  
  var th=document.createElement("th");  
  var at=td.attributes;  
  
  for(i=0;i<at.length;i++)  
  {  
    if(at.item(i) && at.item(i).nodeValue!="" && at.item(i).nodeValue!=null)  
    {  
      th.setAttribute(at.item(i).nodeName,at.item(i).nodeValue);  
    }  
  }  
  
  th.appendChild(tdinhalt);  
  td.parentNode.replaceChild(th,td);  
  
  // nachher  
  alert(document.body.innerHTML);  
}  

  
//-->  
</script>  
  
</head>  
<body onload="Test()">  
<table>  
<tr>  
<td id="tabzelle" bgcolor="yellow"><em>Text</em></td>  
</tr>  
</table>  
</body>  
</html>

MfG, Thomas

[Gernot Back]

Hallo Thomas,

DOM 3 bietet renameNode und wird wohl auch von neueren Mozilla-Browsern implementiert:
alert(document.renameNode), aber mit Elementknoten laeuft da offenbar noch nichts (Bugreport).

Ich frage mich, wozu es immer neuer Methoden bedarf, wenn man doch in DOM3 auch einfach hätte einführen können, die Eigenschaft nodeName statt nur lesbar dann auch änderbar zu machen.

Natürlich ändert das nichts an der Genialität deines alternativen Ansatzes, der bereits jetzt prima funktioniert.

Gruß Gernot

[jenz]

Hallo Thomas,
herzlichen Dank für das Beispiel.
die renameNode()-methode wäre wirklich praktisch, aber eben wäre.
Deine Alternative ist natürlich ebenfalls sehr gut, und funktioniert sowie ja auch ganz toll.

Nur hat der IE offenbar seine liebe Mühe mit cloneNode() und replaceChild(), wenn sich die die Objekte nicht im selben Dokument befinden. Das machts natürlich wieder nicht einfacher.

Bleibt wohl wieder nur die innerHTML-Version für den IE?
gruss
jenz

[Thomas Meinike]

Hallo,

Nur hat der IE offenbar seine liebe Mühe mit cloneNode() und replaceChild(), wenn sich die die Objekte nicht im selben Dokument befinden. Das machts natürlich wieder nicht einfacher.

Bleibt wohl wieder nur die innerHTML-Version für

den IE?

importNode waere noch interessant, aber eher nicht fuer den IE. Vielleicht hilft cloneNode doch, siehe diesen Versuch im Frame-Kontext.

MfG, Thomas

[jenz]

grrr, die Lösung war doch einfacher.
auch der IE schnallt cloneNode() wenn man das Element richtig referenziert und das neue Element nicht nur mit document.createElement() erstellt sondern, dort wo auch das Original-Objekt steht - beispielsweise im opener.
Vielen Dank an alle, die mir geholfen haben.