[FRAGE] Tabelle - Zeilennummer (tr) bestimmen

[Nisbo]

Servus,

Allerdings stoße ich bei mir da auf ein kleines Problem wo ich gerade keine Lösung finde außer den Umweg über PHP und dann würde das direkte Sortieren (ohne submit) ja seinen Sinn verlieren ^^

Ich habe bei mir in der Tabelle auch INPUT Felder aus denen ich den Inhalt per Javascript in eine Zeile drüber oder drunter kopieren kann. Dals löse ich bisher mit IDs.

Nach dem Sortieren der Tabelle mit dem Script von hier:
TableSort

gehen allerdings die Zusammenhänge verloren

<a class=\"no_underline\" href=\"javascript:copyup('callext1', ".$num.");\"><strong>⇑</strong></a>
                <input type=\"text\" id=\"callext1_".$num."\" name=\"callext1[]\" size=\"6\" value=\"".htmlspecialchars($result["callext1"])."\" />
            <a class=\"no_underline\" href=\"javascript:copydown('callext1', ".$num.");\"><strong>⇓</strong></a><br />

            <a class=\"no_underline\" href=\"javascript:copyup('txcontact1', ".$num.");\"><strong>⇑</strong></a>
                <input type=\"text\" id=\"txcontact1_".$num."\" name=\"txcontact1[]\" size=\"6\" value=\"".htmlspecialchars($result["txcontact1"])."\">
            <a class=\"no_underline\" href=\"javascript:copydown('txcontact1', ".$num.");\"><strong>⇓</strong></a><br />

Da wo im Code jeweils ".$num." steht wird durch PHP bei der Generierung der Tabelle die laufende Zeilennummer eingetragen welche aber wie gesagt nach der Sortierung keinen Sinn mehr macht da die Zeilen ja dann wild durcheinander gewürfelt sind.

Ich habe im jeweiligen TR auch eine Spalte mit der Ursprungsnummerierung

<td bgcolor=\"lightgrey\" id=\"td_".htmlspecialchars($num)."\">".$num."</td>

auf die kann ich dann ja mittels

document.getElementById("td_"+nummer).innerHTML

zugreifen.

Was ich jetzt benötige ist die aktuelle Zeilennummer, also das aktuelle TR wenn ich in der jeweiligen Zeile auf einen Button klicke so das ich diese dann meiner copyup oder copydown Funktion übergeben kann, dort kann ich dann wieder mittels +1 oder -1 und

nummer = nummer + 1;
document.getElementById("td_"+nummer).innerHTML

die Referenz zur originalnummerierung holen.

Also wie gesagt ich benötige die aktuelle Zeilennummer wenn ich in einer Zeile auf einen Link klicke

 

[kkapsner]

Brauchst du wirklich die Nummer oder wirklich nur eine Referenz auf das <tr>? Wenn du nur eine Referenz brauchst, kannst du ja an die Funktionen direkt this übergeben und dann so lange über .parentNode das Elternelement nehmen, bis zu beim <tr> angekommen bist.

PS: Das <tr> darüber oder darunter kannst du dann mit .nextElementSilbing bzw. .previousElementSibling bekommen.

 

[Nisbo]

Referenz oder Nummer ist eigentlich egal so lange es sich immer auf die Zeile drüber oder drunter bezieht ^^
Habe es aber inzwischen gelöst, beim Erstellen der Tabelle lege ich eine zusätzliche Spalte an (2. Spalte) in der ich die Ursprüngliche Sortierung speichere, also nur die Zahl nichts weiter.

function nunter(row_id){
	// Quellzeile
	var row			= document.getElementById("tr_" + row_id);
	var next_row	= row.childNodes[3].innerHTML;	// Quell ID
	var next_row2	= row.childNodes[1].innerHTML;	// Zeilennummer wo die Quell ID gerade ist

	// Ziel
	next_row2 = next_row2 * 1; // Ja ich weiss ^^
	next_row2 = next_row2 + 2; // Da ArrayCount +2 statt nur +1

	//document.getElementById("dieliste").getElementsByTagName("tr")[next_row2].getElementsByTagName("td")[1].innerHTML = "Möööp";
	return document.getElementById("dieliste").getElementsByTagName("tr")[next_row2].getElementsByTagName("td")[1].innerHTML;
}

Ist vermutlich nicht die Goldrandlösung aber es funktioniert ^^

 

[kkapsner]

Ist vermutlich nicht die Goldrandlösung

Da hast du definitiv recht. Warum verwendest du nicht .nextElementSibling? Ist kürzer, schneller und du brauchst keine zusätzliche Spalte in deiner Tabelle.

 

[Nisbo]

Da ich sowieso eindeutige IDs für die Eingabefelder brauche muss ich diese ID ja auch irgendwo speichern, macht also nichts aus, so sieht man auch wo der Datensatz beim Sortieren gelandet ist. Mit nextSibling (ohne Element) hatte ich es schon probiert, das Problem war dann das das zwischen den Elementen immer #Text gelandet ist sobald die Tabelle einen Zeilenumbruch hatte, nextElementSibling hatte ich nicht probiert.

Zum Verschieben der Zeilen nutze ich z.b. auch nextSibling

// Zeile nach unten verschieben
function nunterCopy(row_id){
	var row				= document.getElementById("tr_" + row_id);
	var next_after_row	= document.getElementById("tr_" + nunter(row_id));

	insertAfter(row, next_after_row)
}


// Zeile nach oben verschieben
function naufCopy(row_id){
	var row				= document.getElementById("tr_" + row_id);
	var next_after_row	= document.getElementById("tr_" + nauf(row_id));

	insertAfter(next_after_row, row);
}


function insertAfter(newNode, referenceNode) {
	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

 

[kkapsner]

das das zwischen den Elementen immer #Text gelandet ist

Genau das umgeht .nextElementSibling.