Inhalte einer Tabellenzelle verschieben
Ingo
- javascript
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
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> <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> <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
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> <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> <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
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
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
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
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
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
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
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
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>';
}
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
Jau, genau so gehts, ich verneige mich ;-) !!!
Grüße aus Duisburg
Ingo