Definition von Tabellenzeilen

[Madner]

Guten Tag,

ich wollte mir eine Tabelle erstellen, mit der ich jede einzelne Zeile austauschen kann (quasi immer ein ja/nein Zustand).

Habe mir das so vorgestellt:

<table>
  <div style="visibility:visible; display:inline;" id="id_zeile1yes">
    <tr>
      <td>
        hier meine spalten wo auch der button zum umschalten liegt....
      <td>
    </tr>
  </div>
  <div style="visibility:visible; display:none;" id="id_zeile1no">
    <tr>
      <td>
        hier genau so
      </td>
    </tr>
  </div>
</table>

Ich hatte vorher jedes einzelne Objekt in jeder Spalte definiert,
und es wurde auch nur das angezeigt was auf "inline" stand.
Die Objekte wurden mit Javascript gewechselt, hatte auch alles funktioniert, am script leigt es nicht.

also quasi:

<td>
  <div style, id usw.>
    hier das objekt
  </div>
</td>

Einfacher wäre es ja, wenn man die ganze Zeile austauscht,
nur scheint es mir so, dass es ein generelles Problem mit diesem Vorgang gibt,
weil 1. beide Zeilen angezeigt werden und 2. die Buttons nicht mehr funktionieren.

Ich hoffe, dass mir kann jemand sagen kann ob ich da einen Fehler gemacht habe,
oder es generell nicht funktioniert und mir jemand einen anderen Lösungsvorschlag geben könnte.

 

[Madner]

Ok, Denkfehler, :/
Styles und ID's werden direkt in das <tr> tag geschrieben.

Hab hier und da noch ein paar Fehler, aber die Grundfunktion steht.

Fehler z.B., dass wenn ich border auf 1 setze, die Spaltentrennung nicht mehr sehen kann,
und jedes mal wenn ich die Zeile tausche, macht er einen Zeilenumbruch in der Spalte die angezeigt wird,
sodass der untere Außenrahmen immer mehr nach unten geschoben wird.
Vielleicht erkennt ja jemand den Fehler:

    <table border="1">
        <tr height="50" style="visibility:visible; display:inline;" id="id_zeile1yes">
            <td width="26">
                *hier ein bild*
               </td>
               <td width="400">
                *hier steht text*
               </td>
               <td width="20">
                *anderes bild
               </td>
               <td>
                   <div onClick="return switchtr('zeile1yes', 'zeile1no')">
                       <input type="submit" value=" switch to no " >
                   </div>
               </td>                
        </tr>
        <tr height="50" style="visibility:visible; display:none;" id="id_zeile1no">
            <td width="26">
                *bild*
               </td>
               <td width="400">
                *wieder text*
               </td>
               <td width="20">
                *anderes bild*
               </td>
               <td>
                   <div onClick="return switchtr('zeile1no', 'zeile1yes')">
                    <input type="submit" value=" switch so yes " >
                </div>
               </td>
        </tr>
    </table>

Hier noch kurz das Script:

function switchtr(id1, id2) {
        document.getElementById('id_'+id1).style.display = 'none';
        document.getElementById('id_'+id2).style.display = 'inline';
        return true;
}