Multiple Selection in andere Tabelle transportieren

[Ulfmann]

Hallo,

folgende Situation: Ich habe eine Tabelle (select Element) mit Inhalt links, eine andere Tabelle ohne Inhalt rechts und 2 Buttons dazwischen. Ich selektiere Einträge, per Buttonclick wird die Selektion in die leere Tabelle transportiert und aus der Aktuellen entfernt. Rückweg analog.

Ich hab bisher das hier:

function addItems()

{

	for (i = 0; i < document.getElementById('fullTable').options.length; ++i)

	{

		if (document.getElementById('fullTable').options[i].selected == true)

		{

			document.getElementById('emptyTable').options[0] = document.getElementById('fullTable').options[i];

		}

	}



}

function removeItems()

{

	for (i = 0; i < document.getElementById('emptyTable').options.length; ++i)

	{

		if (document.getElementById('emptyTable').options[i].selected == true)

		{

			document.getElementById('fullTable').options[0] = document.getElementById('emptyTable').options[i];

		}

	}

}

Wo ich nun hänge: Bei Mehrfachselektionen wird (logischerweise) nur der letzte Eintrag in der anderen Tabelle dargestellt, der Rest geht flöten. Außerdem wird options[0] immer überschrieben, d. h. es wird nicht "hintendran" gesetzt.

Kann mir da jemand helfen?

[Hexagon]

Außerdem wird options[0] immer überschrieben, d. h. es wird nicht "hintendran" gesetzt.

Ist ja auch völlig normal wenn Du es explizit angibst.

document.getElementById('emptyTable').options[0] = document.getElementById('fullTable').options;

[etreu]

Die Optionen sind ja Arrays. Deswegen lege ich dir mal die Referenz (z.B. SELFHTML: JavaScript / Objektreferenz / Array) nahe. Insbesondere Funktionen push, pop und splice an.

Du kannst dich ja auch auf die DOM-Manipulation beschränken: SELFHTML: JavaScript / Objektreferenz / node.

[Ulfmann]

@Hexagon: Ok. Richtig. Das ist soweit schon korrigiert - nun wird das verschobene Element einfach hinten dran gehängt.

var tableLength = document.getElementById('emptyTable').options.length;

for (i = 0; i < document.getElementById('fullTable').options.length; ++i)

{

	if (document.getElementById('fullTable').options[i].selected == true)

	{

		document.getElementById('emptyTable').options[tableLength] = document.getElementById('fullTable').options[i];

	}

}

Schöner würde ich es finden, wenn es gleich wieder an seinen ursprünglichen Platz sortiert wird. Viel wichtiger ist aber noch die Frage, wie ich die Mehrfachselektion nun behandel. Spontane Idee:

Überprüfe alle

    Wenn selektiert

        schreibe in Array


Durchlaufe Array

    Sortiere in neue Tabelle

Sinnvoll?

[etreu]

Du kannst auch beim Einfügen des neuen Wertes auf die bestehende Ordnung aufbauen. Du must nur noch die neue Position finden.

Damit sparst du dir das Sortieren.

[FISI from Hell]

Du must nur noch die neue Position finden.

Damit sparst du dir das Sortieren.

Das wäre dann ein insert sort.

@Ulfmann: Dein Vorschlag sieht erstmal sinnvoll aus, ob es die beste Lösung ist sei mal dahingestellt, sollte aber zum gewünschten Ergebnis führen.

[Ulfmann]

Du kannst auch beim Einfügen des neuen Wertes auf die bestehende Ordnung aufbauen. Du must nur noch die neue Position finden.

Da scheint mir die splice() Methode am ehesten geeignet, allerdings will ich nichts löschen, sondern nach hinten verschieben. Der Weg "zu Fuß" leuchtet mir ein, aber ich hätte gern etwas Eleganteres.

Das wäre dann ein insert sort.

Insertsort ist ein Sortieralgorithmus. Und den meinte etreu garantiert nicht.

[FISI from Hell]

Belehre mich eines besseren, aber der würde genau das machen, was gebraucht wird - Position finden, andere Einträge nach hinten schieben und den Eintrag an richtiger Stelle einreihen.

Bessere Lösungen kann man immer noch einbringen oder ist es dein bestreben immer gleich die optimale Lösung zu haben?

[Hexagon]

Ähm... würde ein

document.getElementById('emptyTable').options[tableLength++] = document.getElementById('fullTable').options;

nicht schon reichen? Oder hab ich jetzt was falsch verstanden?

[Ulfmann]

Ähm... würde ein

nicht schon reichen? Oder hab ich jetzt was falsch verstanden?

Mehrfachselektion lässt sich so schlecht realisieren (oder ich verstehe es jetzt falsch )

Ich habs jetzt so:

var tableLength = document.getElementById('emptyTable').options.length;

var newElements = new Array();

var counter     = 0;


for (i = 0; i < document.getElementById('fullTable').options.length; ++i)

{

	if (document.getElementById('fullTable').options[i].selected == true)

	{

		newElements[counter] = document.getElementById('fullTable').options[i];

		counter++;

	}

}

counter = 0;

for (i = 0; i < newElements.length; i++)

{

	document.getElementById('emptyTable').options[tableLength + counter] = newElements[i];

	counter++;

}

Das tut, was ich will: Nimmt den/die selektierten Wert(e), überträgt ihn/sie in die andere Tabelle und löscht ihn/sie aus der Aktuellen. Was mich nun noch stört, ist dass er immer ans Ende schreibt.

ist es dein bestreben immer gleich die optimale Lösung zu haben?

Ja!

[etreu]

Insertsort ist ein Sortieralgorithmus. Und den meinte etreu garantiert nicht.

Im Endeffekt schon. Bei dir entfällt nur das initiale Sortieren. Wenn deine Datenmenge überschaubar ist, dann kannst du liniar die Stelle suchen. Wenn nicht, dann kannst du es mit binärer Suche probieren.

Nutzt du irgendein JS-Framework, das die Funktion vielleicht schon bereitstellt?

Was das splice() angeht: du machst vorher ein slice() und nachher ein join. Und schon ist wieder alles i.O.

[Hexagon]

Mehrfachselektion lässt sich so schlecht realisieren (oder ich verstehe es jetzt falsch )

Öhm... Nö, wieso? Du gehst doch sowieso durch Deine Markierungen und fügst sie alle ein. Nur eben immer wieder an der gleichen Stelle. Warum also nicht einfach für den Einfügefall gleich noch die Einfügeposition mit hochzählen und dann gleich alle Markierten mitnehmen?