:: Buchempfehlung ::

cyan.ide · #11 26.02.2007, 15:13:43

Zitat:

Zitat von KTB

Momentan erweckst du auf mich folgenden Eindruck:
"Das muss so und nicht anders gehen. Ich will dass es so geht."

Ja, das ist richtig. ;)
Wie es anders geht, weiss ich ja leider schon.
Das einfachste Einsatzgebiet waer eine Liste mit 20 Spalten, bei welcher man einzelne Zeilen neu ordnen moechte. Das koennte man dann beispielsweise via Drag&Drop machen. Alles auch kein Problem soweit. Nun bezwecke ich die bestehende Loesung, die jeweils die TD-Inhalte in ein Array packt, und die Array's jeweils auf die andere Reihe anwendet, durch eine andere zu ersetzen. Ich verspreche mit davon eine etwas schnellere Reaktion nach der Aktion, denn 40 TD-Felder live lesen und schreiben ist auf schwaecheren Rechnern schon ne kleine Show... Und wenn man 20 Reihen schnell mal sortieren will, dann dauert das etwas laenger.

Man kann die Geschwindigkeit auch klar steigern, indem man alle TD-Inhalte auf "display: none" setzt und dann kopiert.

Eine andere Moeglichkeit waer beispielsweise auch, eine neue TR-Reihe zu erzeugen und diese mit den Daten einer TR-Reihe zu beschreiben. Danach fuegt man diese neu erstellte Zeile am Zeil ein und loescht die Alte.

Eine ganz andere Methode waere, die Zeilen durch eine Callback-Sort Methode neu ordnen zu lassen, nachdem man nur einen Wert in einer TD-Spalte anpasst.

Nur waer es eben richtig rund, wenn man die Position von <tr>'s (ohne Sort) aendern koennte.

Gruss

Andes · #12 27.02.2007, 13:27:04

So wie du es definiert hast kann es nicht funktionieren, da du ein Objekt erhältst und nicht den Inhalt der Zeilen.
Warum sollte es mit innerHTML nicht funktionieren? Denke mal, dass du da etwas falsch gemacht hast.
Folgendes funktioniert jeden falls.

HTML-Code:

function swapRows1( row_id1, row_id2 )
{
	var row1 = document.getElementById( row_id1 );
	var row2 = document.getElementById( row_id2 );
	temp = row1.innerHTML;     
	row1.innerHTML = row2.innerHTML;
	row2.innerHTML = temp;
}

cyan.ide · #13 27.02.2007, 14:01:23

Zitat:

Zitat von Andes

So wie du es definiert hast kann es nicht funktionieren, da du ein Objekt erhältst und nicht den Inhalt der Zeilen.

Ich wollte auch die Objekte vertauschen und nicht den Inhalt der Zeilen, weil...

Zitat:

Zitat von Andes

Warum sollte es mit innerHTML nicht funktionieren? Denke mal, dass du da etwas falsch gemacht hast.
Folgendes funktioniert jeden falls.

HTML-Code:

function swapRows1( row_id1, row_id2 )
{
	var row1 = document.getElementById( row_id1 );
	var row2 = document.getElementById( row_id2 );
	temp = row1.innerHTML;     
	row1.innerHTML = row2.innerHTML;
	row2.innerHTML = temp;
}

...das von Dir gezeigte Beispiel zwar im Firefox funktioniert, im IE(6) produziert dieser Versuch einen "Unbekannten Laufzeitfehler".

Folgenden Code habe ich zum testen benutzt:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>-</title>
	</head>

	<body>
	
		<table width="800" border="0" cellspacing="0" cellpadding="3">
		  <tr id="z1">
			<td>Apfel</td>
			<td>A1</td>
			<td>A2</td>
			<td>A3</td>
			<td>A4</td>
			<td>A5</td>
		  </tr>
		  <tr id="z2">
			<td>Kartoffel</td>
			<td>K1</td>
			<td>K2</td>
			<td>K3</td>
			<td>K4</td>
			<td>K5</td>
		  </tr>
		</table>
		
		
		<script>
		function swapRows( row_id1, row_id2 )
		{
			var row1 = document.getElementById( row_id1 );
			var row2 = document.getElementById( row_id2 );
			temp = row1.innerHTML;     
			row1.innerHTML = row2.innerHTML;
			row2.innerHTML = temp;
		}
		</script>
		<input type="button" value="aendern" onclick="swapRows( 'z1', 'z2' );" />
		
	</body>
</html>

Mit der Feststellung, dass es im IE nicht funktioniert, will ich mich nicht zufrieden geben.

Andes · #14 27.02.2007, 15:01:26

Gut im IE hab ich es nicht getestet. Da wird wohl der IE es entweder sehr genau nehmen(interpretiert es als Objekt) oder es einfach nicht verstehen. Obwohl es eigentlich eine Erfindung von Microsoft ist und nicht zum Dom-Object gehört.
Da wird dir wohl nichts anderes übrig bleiben es mittels Dom-Object zu bewältigen.

cyan.ide · #15 27.02.2007, 16:30:46

Zitat:

Zitat von Andes

Gut im IE hab ich es nicht getestet. Da wird wohl der IE es entweder sehr genau nehmen(interpretiert es als Objekt) oder es einfach nicht verstehen. Obwohl es eigentlich eine Erfindung von Microsoft ist und nicht zum Dom-Object gehört.
Da wird dir wohl nichts anderes übrig bleiben es mittels Dom-Object zu bewältigen.

Haettest du da vielleicht noch einen Tipp in der Hinterhand?
Dann waer der Thread so halbwegs gerettet, denn ich bin damit jetzt keinen Schritt weitergekommen

Andes · #16 27.02.2007, 19:23:48

Mit cloneNode würde es gehen. Dabei muss aber in der Tabelle der tbody-Bereich definiert sein, ansonsten funktioniert es im IE nicht. Warum siehst du, wenn du dir am Ende deiner Funktion mal den Quelltext ausgeben lässt. IE und FF erstellen den tbody-Bereich automatisch, bloß der IE fügt dann die Zeilen nicht in den tbody-Bereich ein. Sondern hängt sie einfach hinten an. So sind zwar die eingefügten Zeilen vorhanden werden aber nicht angezeigt.
Das hier ist nur ein Beispiel um zu zeigen wie es gehen würde. Für eine größere Tabelle müsste man dies dynamischer gestallten. Damit man den Zeilentausch wieder rückgängig machen kann und nicht extra jede Zeile definieren muss.

HTML-Code:

function swapRows( row_id1, row_id2 ) {
	//Kopie der Zeilen erstellen
	var row1 = document.getElementById(row_id1).cloneNode(true);
	var row2 = document.getElementById(row_id2).cloneNode(true);
	var tab = document.getElementById('bod');
	//Zeilen löschen
	tab.removeChild(document.getElementById(row_id1));
	tab.removeChild(document.getElementById(row_id2));
	//Zeilen neu einfügen
	tab.appendChild(row2);
	tab.appendChild(row1);
}

Es geht auch noch etwas kürzer.

HTML-Code:

function swapRows( row_id1, row_id2 ) {
	var tab = document.getElementById('bod');
	//Zeilen löschen
	//eine Kopie des gelöschten Knotens in Variable speichern
	row1 = tab.removeChild(document.getElementById(row_id1));
	row2 = tab.removeChild(document.getElementById(row_id2));
	//Zeilen neu einfügen
	tab.appendChild(row2);
	tab.appendChild(row1);
}

Edit: Ach so, die Tabelle sieht dann so aus.

HTML-Code:

<table width="800" border="1" cellspacing="0" cellpadding="3">
<tbody id="bod">
<tr id="z1">
	<td>Apfel</td>
	<td>A1</td>
	<td>A2</td>
	<td>A3</td>
	<td>A4</td>
	<td>A5</td>
</tr>
<tr id="z2">
	<td>Kartoffel</td>
	<td>K1</td>
	<td>K2</td>
	<td>K3</td>
	<td>K4</td>
	<td>K5</td>
</tr>
</tbody>
</table>

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!