Mareike: Jquery Zeilen und Spalten in Tabelle vertauschen

Hallo,

eine 3x4 Tabelle muss sich wenn ich auf einen Button drücke in eine 4x3 Tabelle ändern. Die Zeilen sollen mit den Spalten vertauscht werden. Ich habe nicht so viel Ahnung in Jquery. Ich habe irgendwo von removerChild() entfernen und insetBefore() einfügen gelesen, weiß allerdings nicht wie der Code dann aussehen soll. Ich hoffe es kann mir jemand helfen. Die Tabelle in html

<body>	
	
<button id="tauschen">Vertauschen</button>
		
<table>
  <tr>
    <th id="a1">A1</th>
    <th id="b1">B1</th>
    <th id="c1">C1</th>
  </tr>
  <tr>
    <td id="a2">A2</td>
    <td id="b2">B2</td>
    <td id="c2">C2</td>
  </tr>
  <tr>
     <td id="a3">A3</td> 
     <td id="b3">B3</td>
     <td id="c3">C3</td>
  </tr>
  <tr>
    <td id="a4">A4</td>
    <td id="b4">B4</td>
    <td id="c4">C4</td>
  </tr>
</table>	
	</body>
  1. Die Tabelle in html

    HTML ist hier nebensächlich, wichtig is, eine geeignete Datenstruktur zu finden und einen geeigneten Algorithmus dazu. Es sei denn, jQuery kann solche Transformationen im DOM abwickeln, wenn ja stünds in der doku, Stichwort transponieren.

  2. @@Mareike

    eine 3x4 Tabelle muss sich wenn ich auf einen Button drücke in eine 4x3 Tabelle ändern. Die Zeilen sollen mit den Spalten vertauscht werden.

    Soll sich die Darstellung ändern oder ist das eine JavaScript-Hausaufgabe, das DOM umzubauen?

    Ich habe nicht so viel Ahnung in Jquery.

    jQuery könnte gegenüber Vanilla-JavaScript den Code etwas vereinfachen, ist aber nicht wirklich erforderlich.

    Ich habe irgendwo von removerChild() entfernen und insetBefore() einfügen gelesen

    Für Tabellenzeilen und -zellen gibt es auch noch spezielle Methoden.

    Ich hoffe es kann mir jemand helfen.

    Wobei genau? Wie soll die Hilfe aussehen? Fertiger Code? 😂

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. @Gunnar Bittersmann Der Code muss in jquery gemacht werden es währe natürlich besser ein fertigen code zu haben, aber Teile helfen mir schon weiter. Ich weiß nicht genau wie ich Zeilen und Spalten tauschen noch anders beschreiben soll. Beim Aufruf ist sie 3x4 zusehen und nach dem Button klick die als 4x3 also eher Darstellung.

      Bis her weiß ich von einem anderen gemachten code dass es so anfängt

      $(document).ready(function() { $("#veränder").click(function() {...

      1. Bis her weiß ich von einem anderen gemachten code dass es so anfängt $(document).ready(function() { $("#veränder").click(function() {...

        Das ist cool! Wenn Du das "veränder" bei Dir durch "tauschen" ersetzt, dann kannst Du auf Deinen Button drücken, landest direkt in "..." und kannst dort mit dem eigentlichen Problem weitermachen!

        1. Hallo,

          Das ist cool! Wenn Du das "veränder" bei Dir durch "tauschen" ersetzt, dann kannst Du auf Deinen Button drücken, landest direkt in "..." und kannst dort mit dem eigentlichen Problem weitermachen!

          erst habe ich "täuschen" gelesen, aber das war Dreck auf dem Bildschirm. Wenn die Funktion weder "veränder" noch "tauschen" hieße, sondern "transponieren", dann könnte ein Schuh draus werden.

          Gruß
          Kalk

          1. erst habe ich "täuschen" gelesen, aber das war Dreck auf dem Bildschirm.

            LOL

            Wenn die Funktion weder "veränder" noch "tauschen" hieße, sondern "transponieren", dann könnte ein Schuh draus werden.

            Ihr Button hat aber die ID "tauschen"! Vielleicht sollte Sie den doch lieber auf "veränder" ändern, dann ist das universeller!

  3. Kenn mich auch nicht besonderst aus aber würde es auf Anhieb wohl so lösen

        $("#change").click(function(){
    	
    	var $a =$("#a3");
    	$a.after('<td id="a4">4</td>');
    	$('#b1').remove();
    	
    	var $b =$("#b3");
    	$b.after('<td id="b5">8</td>');
    	$b.after('<td id="b4">7</td>');
    	$('#c1').remove();
    	$('#c2').remove();
    	
    	
    	var $c =$("#c3");
    	$c.after('<td id="c4">12</td>');
    	$c.after('<td id="c3">11</td>');
    	$c.after('<td id="c2">10</td>');
    	$('#d1').remove();
    	$('#d2').remove();
    	$('#d3').remove();
    	$('#d4').remove();
    	});
    

    Nicht sehr elegant aber erfüllt wohl seinen Zweck

    1. Hallo ChiefDuncan,

      Nicht sehr elegant aber erfüllt wohl seinen Zweck

      Wahrscheinlich nicht, denn aus

      |th|th|th| |td|td|td| |td|td|td| |td|td|td|

      muss ja

      |th|td|td|td| |th|td|td|td| |th|td|td|td|

      werden.

      Du wirst wohl um ein Array nicht umhinkommen.

      Bis demnächst
      Matthias

      --
      Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)