Ingo: Inhalte einer Tabellenzelle verschieben

Hallo,

ich habe folgende Problemstellung:

Ich habe eine Tabelle mit zwei Spalten und mehreren Zeilen.
In der ersten Tabellenspalte befinden sich Texte. Die zweite Tabellenspalte enthält eine Grafik[NACH OBEN] mit einem Link der die Funktion haben soll die entsprechende Zeile über die davorliegende Zeile zu schieben:

Bsp:

1. Zeile: erster Text,
2. Zeile: zweiter Text, [NACH OBEN]
3. Zeile: dritter Text, [NACH OBEN]

Wenn also auf die Grafik der dritten Zeile geklickt wird, soll diese in die zweite Zeile rutschen und umgekehr.

Den Text der Zeilen und Ihre entsprechende Position möchte ich Anhand von zwei Variablen dann in eine Datenbank schreiben.

Ich suche ein entsprechendes JAVASCRIPT, daß dieses Verschieben der Elemente ermöglicht und mir die entsprechenden Variablen dann übergibt.

Wäre klasse wenn mir jemand helfen könnte, da ich von JavaScript nicht so doll viel Ahnung habe.

Vielen Dank

Ingo

  1. Hallo Ingo,

    <script type="text/javascript">
    function top(c)
     {
     a=document.getElementsByName("a"+c)[0].value
     document.getElementsByName("a"+c)[0].value=document.getElementsByName("a"+(c-1))[0].value
     document.getElementsByName("a"+(c-1))[0].value=a
     }

    function bot(c)
     {
     a=document.getElementsByName("a"+c)[0].value
     document.getElementsByName("a"+c)[0].value=document.getElementsByName("a"+(c+1))[0].value
     document.getElementsByName("a"+(c+1))[0].value=a
     }
    </script>
    </head>
    <body>
    <form action="~" method="post">
    <table>
     <tr> <td><a href='javascript:bot(0)'>bottom</a>&nbsp;<a href='javascript:top(0)'>top</a></td>
          <td>Eingabe:</td>
          <td><input type='text' name='a0'></td>
     </tr>
     <tr> <td><a href='javascript:bot(1)'>bottom</a>&nbsp;<a href='javascript:top(1)'>top</a></td>
          <td>Eingabe:</td>
          <td><input type='text' name='a1'></td>
     </tr>
    [...]
    </table>
    </form>

    Kann sein, das ich jetzt beim Herauslöschen einiger Komponeten Fehler gemacht habe (habe es nicht noch mal laufen lassen). Bitte selbst debuggen. Erste definitive Fehlerquelle ist, daß für das letzten <input> kein Element[name="a"+(c+1)] existiert - und dementsprechen auch beim ersten Element...
    Da ich damals das script serverseitig generiet habe, hatte ich eine Kontrollstruktur erstell, um diese Fehler zu vermeiden; (erste <input> hatte kein <a ~>top</a> und umgekehrt mit dem letzten...)

    Das wäre jetzt die einzigste relativ leichte Möglichkeit dies mit einem Formular zu realisieren. Das mit den einzelen Tabellenzellen würde auch gehen, aber das ist komplizierter zu realisieren... (Wenn die User nicht sehen sollen, das es sich um ein Formular handelt, dann benutze stylesheets und "readonly".)

    Gruß aus Berlin!
    eddi

    1. Hallo Eddi,

      danke für Deine Mühe, es scheint wirklich so zu funktionieren:-))

      Eine lezte Frage habe ich noch, auf den Inhalt der Textfelder kann ich ja zugreifen und diese dann Abspeichern, aber wie komme ich an die Reihenfolge?

      Viele Grüße

      Ingo

      Hallo Ingo,

      <script type="text/javascript">
      function top(c)
       {
       a=document.getElementsByName("a"+c)[0].value
       document.getElementsByName("a"+c)[0].value=document.getElementsByName("a"+(c-1))[0].value
       document.getElementsByName("a"+(c-1))[0].value=a
       }

      function bot(c)
       {
       a=document.getElementsByName("a"+c)[0].value
       document.getElementsByName("a"+c)[0].value=document.getElementsByName("a"+(c+1))[0].value
       document.getElementsByName("a"+(c+1))[0].value=a
       }
      </script>
      </head>
      <body>
      <form action="~" method="post">
      <table>
       <tr> <td><a href='javascript:bot(0)'>bottom</a>&nbsp;<a href='javascript:top(0)'>top</a></td>
            <td>Eingabe:</td>
            <td><input type='text' name='a0'></td>
       </tr>
       <tr> <td><a href='javascript:bot(1)'>bottom</a>&nbsp;<a href='javascript:top(1)'>top</a></td>
            <td>Eingabe:</td>
            <td><input type='text' name='a1'></td>
       </tr>
      [...]
      </table>
      </form>

      Kann sein, das ich jetzt beim Herauslöschen einiger Komponeten Fehler gemacht habe (habe es nicht noch mal laufen lassen). Bitte selbst debuggen. Erste definitive Fehlerquelle ist, daß für das letzten <input> kein Element[name="a"+(c+1)] existiert - und dementsprechen auch beim ersten Element...
      Da ich damals das script serverseitig generiet habe, hatte ich eine Kontrollstruktur erstell, um diese Fehler zu vermeiden; (erste <input> hatte kein <a ~>top</a> und umgekehrt mit dem letzten...)

      Das wäre jetzt die einzigste relativ leichte Möglichkeit dies mit einem Formular zu realisieren. Das mit den einzelen Tabellenzellen würde auch gehen, aber das ist komplizierter zu realisieren... (Wenn die User nicht sehen sollen, das es sich um ein Formular handelt, dann benutze stylesheets und "readonly".)

      Gruß aus Berlin!
      eddi

      1. Hallo Ingo,

        wenn Du der bei der Vergabe der Namen gnauso vorgegangen bist wie ich (a0,a1,a2,..a1000) dann brauchst Du da Array POST nur noch mir einem einfachen for() zu durchlaufen.
        erstes Element ist dabei $_POST['a'.$i] . :)

        Gruß aus Berlin!
        eddi

        1. Hallo Eddi,

          ok, das müßte auch funktionieren.

          Ich habe jedoch noch ein weiteres Problem. Ich kann ja jetzt die einzelnen Namen verschieben. In meiner Datenbank hat natürlich jeder Name eine ID, die ich ja dann auch mit einbauen müßte. Vielleicht durch ein dahinter liegendes Hidden-Feld. Wäre das auch noch irgendwie machbar?

          Ein schönes Wochenende und vielen Dank für Deine Mühe!

          Viele Grüße

          Ingo

          Hallo Ingo,

          wenn Du der bei der Vergabe der Namen gnauso vorgegangen bist wie ich (a0,a1,a2,..a1000) dann brauchst Du da Array POST nur noch mir einem einfachen for() zu durchlaufen.
          erstes Element ist dabei $_POST['a'.$i] . :)

          Gruß aus Berlin!
          eddi

          1. Hallo Ingo,

            ok, das müßte auch funktionieren.

            Ich habe jedoch noch ein weiteres Problem.

            Da ist kein Problem zu erkennen ;)

            Vielleicht durch ein dahinter liegendes Hidden-Feld. Wäre das auch noch irgendwie machbar?

            <script type="text/javascript">
            function top(c)
             {
                a=document.getElementsByName("a"+c)[0].value
                document.getElementsByName("a"+c)[0].value=document.getElementsByName("a"+(c-1))[0].value
                document.getElementsByName("a"+(c-1))[0].value=a

            // für <input type="hidden" name="b(Durchlaufende Nummer)" value="DB id">
                b=document.getElementsByName("b"+c)[0].value
                document.getElementsByName("b"+c)[0].value=document.getElementsByName("b"+(c-1))[0].value
                document.getElementsByName("b"+(c-1))[0].value=b
             }
            // [...]
            </script>

            Gruß aus Berlin!
            eddi

            1. Hi Eddi,

              genial, das kann man ja dann nach belieben um zusätzliche Felder erweitern, klasse!

              Hast Du  vielleicht einen JavaScript Buch-Tipp, der einem ein
              Verständnis für solche Sachen einfach vermittelt?

              Vielen Dank nochmal und Grüße nach Berlin

              Ingo

              Hallo Ingo,

              ok, das müßte auch funktionieren.

              Ich habe jedoch noch ein weiteres Problem.

              Da ist kein Problem zu erkennen ;)

              Vielleicht durch ein dahinter liegendes Hidden-Feld. Wäre das auch noch irgendwie machbar?

              <script type="text/javascript">
              function top(c)
               {
                  a=document.getElementsByName("a"+c)[0].value
                  document.getElementsByName("a"+c)[0].value=document.getElementsByName("a"+(c-1))[0].value
                  document.getElementsByName("a"+(c-1))[0].value=a

              // für <input type="hidden" name="b(Durchlaufende Nummer)" value="DB id">
                  b=document.getElementsByName("b"+c)[0].value
                  document.getElementsByName("b"+c)[0].value=document.getElementsByName("b"+(c-1))[0].value
                  document.getElementsByName("b"+(c-1))[0].value=b
               }
              // [...]
              </script>

              Gruß aus Berlin!
              eddi

              1. Hi Eddi,

                Hast Du  vielleicht einen JavaScript Buch-Tipp, der einem ein
                Verständnis für solche Sachen einfach vermittelt?

                Das werde ich nie verstehen! Wir sind nicht mehr im Mittelalter ;) - das Internet ist das größte Buch der Welt. Google wird Dir alles heraussuchen, was Du wissen willst.

                Ich weiß, um Deutschlands Wirtschaft steht es schlecht, aber das alleine stellt nun auch keinen Grund dar, UNNÖTIG Geld auszugeben ;)

                Gruß aus Berlin!
                eddi

                1. Ja ja, Du hast ja recht, aber so ein Buch in gedruckter Form ist mir meist doch lieber;-)

                  Hi Eddi,

                  Hast Du  vielleicht einen JavaScript Buch-Tipp, der einem ein
                  Verständnis für solche Sachen einfach vermittelt?

                  Das werde ich nie verstehen! Wir sind nicht mehr im Mittelalter ;) - das Internet ist das größte Buch der Welt. Google wird Dir alles heraussuchen, was Du wissen willst.

                  Ich weiß, um Deutschlands Wirtschaft steht es schlecht, aber das alleine stellt nun auch keinen Grund dar, UNNÖTIG Geld auszugeben ;)

                  Gruß aus Berlin!
                  eddi

            2. Hi Eddi,

              ein kleine Problem habe ich jetzt doch noch - und zwar mit php - vielleicht kennst Du Dich ja genauso gut aus;-)

              Ich habe ja jetzt verschiedene Variablen:

              $a0
              .
              .
              .
              $ax

              Zum schreiben der Daten per php in eine Datenbank möchte ich sie in einer Schleife durchlaufen. Bsp:

              for ($z=0; $z<$bis; $z++)
              {
              $name=$a$z;
              }

              So klappt es natürlich nicht weil ich ja dann zwei Variablen habe und nicht die ursprüngliche.

              Hast Du eine Ahnung wie ich an die einzelnen Variablen $a0,$a1 etc. komme, oder wie ich das anpacken könnte.

              Grüße

              Ingo

              1. Hi Ingo,

                Du generierst Deine Felder in etwas so:

                for($i=0;$i<$bis;$i++)
                   {
                   echo '<input type="der_typ" name="a'.$i.'">';
                   }

                Da alle angelieferten Daten je nach dem, entweder in $_GET, oder in $_POST (, oder in $_FILES) angeliefert werden, brauchst Du dieses Datenfeld auch nur noch mit for() zu durchlaufen.

                $a$z geht nicht; $a.$z würde aber beispliesweise wieder gehen, für den Falls $a='a';     :)

                for($z=0;$z<$bis;$z++)
                   {
                   echo $_POST['a'.$z].'<br>';
                   }

                Kleiner Tip:

                Verschaffe Dir immer erst auf dem verarbeitenden Script (das durch ACTION definierte Zielscript) einen Überblick über die zu verarbeitenden Daten:

                <?php
                print_r($_POST);
                ?>

                Gruß aus Berlin!
                eddi

                1. Jau, genau so gehts, ich verneige mich ;-) !!!

                  Grüße aus Duisburg

                  Ingo