colspan dynamsich mit JavaScript einfügen?

[Achim]

Hallo zusammen,

ich bin neu hier im Forum und hab versucht schon ne Lösung für mein Problem zu finden. Ist mir aber nicht gelungen. Deswegen frag ich einfach mal in die Runde.

Ich hab folgendes Problem:
Ich will von einer bereits bestehenden Tabelle nachträglich einen colspan einfügen - also eine Zelle nachträglich verlängern.

Bsp. folgende Tabelle existiert:
<table name="MyTable">
  <tr>
    <td id="Cell1">Zelle 1</td>
    <td id="Cell2">Zelle 2</td>
  </tr>
  <tr>
    <td id="Cell3">Zelle 3</td>
    <td id="Cell4">Zelle 4</td>
  </tr>
</table>

+-----------------------+
|  Zelle 1  |  Zelle 2  |
+-----------------------+
|  Zelle 3  |  Zelle 4  |
+-----------------------+

Folgendes Ergebnis soll ein JavaScript bringen:
<table name="MyTable">
  <tr>
    <td id="Cell1" colspan="2">Zelle 1</td>
  </tr>
  <tr>
    <td id="Cell3">Zelle 3</td>
    <td id="Cell4">Zelle 4</td>
  </tr>
</table>

+-----------------------+
|       Zelle 1         |
+-----------------------+
|  Zelle 3  |  Zelle 4  |
+-----------------------+

Die Zelle 2 hab ich mit einem CSS bereits versteckt:
.HideObject{
visibility:hidden;
display:none;
}

document.MyTable.Cell2.className = "HideObject";

Dennoch will die Zelle 1 sich nicht über 2 Spalten erstrecken.

Kann ich das mit einem JavaScript überhaupt lösen?
Wäre schon wenn's ne Lösung gäbe. Vielen Dank schon mal für eure Bemühungen.

Gruss Achim

[Thorsten Steffen]

hio,

Die Zelle 2 hab ich mit einem CSS bereits versteckt:
.HideObject{
visibility:hidden;
display:none;
}

verstecken wird wenig bringen, besser ist diese zu entfernen. s.u.

document.MyTable.Cell2.className = "HideObject";

Dennoch will die Zelle 1 sich nicht über 2 Spalten erstrecken.

klar, löschen ist besser, sie existiert ja noch.

Kann ich das mit einem JavaScript überhaupt lösen?
Wäre schon wenn's ne Lösung gäbe. Vielen Dank schon mal für eure Bemühungen.

klar, document.getElementById("Cell1").setAttribute("colspan",2);
Danach solltest du jedoch die 2 Zelle danach löschen. Den deine erste übernimmt nun den Platz der ersten.

document.getElementById("Cell2").parentNode.removeChild(document.getElementById("Cell2")); oder so ähnlich müsste gehen.

bin noch nicht ganz so fit ;) aber ein Blick in SELFHTML könnte gut helfen, steht das wesentliche dazu drin.

gl & hf

Thorsten

[Achim]

Hallo Thorsten

danke für deine Antwort.
Das Entfernen der Knoten (removeChild) funktioniert auf folgende Weise prima:
var Knoten = document.getElementById("Cell2");
Knoten.parentNode.removeChild(Knoten);

Danke für den Hinweis.
SetAttribute schlägt allerdigs fehl. Ich vermute, dass das Attribut nur gesetzt werden kann, wenn es bereits existiert. Wenn meine Tabelle zunächst also so aussehen würde:

<table name="MyTable">
  <tr>
    <td id="Cell1" COLSPAN="1">Zelle 1</td>
    <td id="Cell2">Zelle 2</td>
  </tr>
  <tr>
    <td id="Cell3">Zelle 3</td>
    <td id="Cell4">Zelle 4</td>
  </tr>
</table>

Es gibt zwar die Methode createAttribute() (im SelfHTML beschrieben) mit der man einen Attributknoten erzeugt, doch die scheint nur im Netscape zu funktionieren. Und leider hab ich nur den IE zur Verfügung. Ich hab auch nicht die Möglichkeit 'colspan="1"' in die ursprüngliche Tabelle einzufügen.

Vielleicht werd ichs auf folgende Weise lösen:
Folgende Tabelle über der ersten einfügen:
<table name="MyTableNew">
  <tr>
    <td id="NewCell1">Zelle 1</td>
  </tr>
</table>

Und dann die erste Zeile in "MyTable" komplett löschen mit "removeChild". Umständlich - ich weiss, aber machbar.

Trotzdem DICKES DANKE für deine Hilfe.

Gruss Achim

[Thorsten Steffen]

Hio,

Jetzt hast du mich gut erwischt, ohne das du es weisst ;)
Hab damit mal früher rumgespielt für eine kleine Demoseite und hätte es eigentlich gleich wissen müssen wies geht. Naja mache zuviel mit PHP und zuwenig JavaScript und scheine eigentlich alles wieder vergessen zu haben.

ok, nun hier die Lösung:

document.getElementById("Cell1").setAttribute("colSpan",2);

In colSpan _muss_ das s grossgeschrieben werden, zumindest für den IE.

gl & hf

Thorsten