✔ Neue Tabellenzeile an bestimmter Stelle in der Tabelle anhängen

ahykes

ahykes

Erfahrenes Mitglied
Hallo!
Ich habe eine von PHP erstellte HTML-Tabelle. Diese sieht ungefair so aus (stark verkürzt):

HTML: 
<table border="0" id="basisDataTable" class="ksbTableFont" cellpadding="1" cellspacing="1">
 <tbody id="basisDataTableTbody">
	<tr id="0687169" title="0687169" bgcolor="#CCCCCC"   >
	<td align="center" bgcolor="#FFFFFF" width="15" onClick="javascript: addPnr2Hist('0687169','images/logo_mb.gif'); selectTableRow('0687169',false);"><a name="0687169.scrollPosition" ><img src="images/logo_mb.gif" id="0687169.LOGO" onDblClick="deSelectTableRow();";></a></td>
	<td id="0687169.BMIMG" align="center" bgcolor="#FFFFFF" width="30" onClick="javascript: addPnr2Hist('0687169','images/logo_mb.gif'); selectTableRow('0687169',false);"><img src="images/bmImg/A2LL35.jpg" title="A2 / LL / 3.5 to"></td>
	<td id="0687169.PNR" align="center" width="48" onClick="javascript: addPnr2Hist('0687169','images/logo_mb.gif'); selectTableRow('0687169',false);">0687169</td>
	<td id="0687169.SAT" align="center" width="48" onClick="javascript: addPnr2Hist('0687169','images/logo_mb.gif'); selectTableRow('0687169',false);">24.09.10</td>
	<td id="0687169.SPERRSTATUS" align="center"  width="50" onClick="javascript: addPnr2Hist('0687169','images/logo_mb.gif'); selectTableRow('0687169',false);"><b></b></td>
	<td align="center" align="center"><img src="images/edited_state.gif" onClick="expandDistrictionDialog('0687169');" style="cursor: pointer;"></td>
	<td id="0687169.EVENT" align="center" width="41" onClick="javascript: addPnr2Hist('0687169','images/logo_mb.gif'); selectTableRow('0687169',false);">FP630</td>
		<td width="26" align="center">G40</td>
	<td width="26"></td>
	<td width="26" align="center">MC9</td>
	<td width="26"></td>
	<td width="26"></td>

	<input type="hidden" id="0687169.LISTE" value="5">
	<input type="hidden" id="0687169.SPERRSTATUS" value="">
	<script language="Javascript">ksbProducts.push("0687169");</script>
	</tr>
 </tbody>
</table>


Die Zeilen kommen aus einer Datenbank sind nach einem bestimmten Kriterium sortiert.
Nun kommen aber per Ajax stetig neue Zeilen dazu. Diese möchte ich nun per Javascript anhängen.
Hänge ich diese per "appendChild" an die Tabelle an, kommen sie logischer Weise ans Ende Tabelle. Das funktioniert; dadurch ist alles aber natürlich nicht sortiert.

Gibt es irgendeine Möglichkeit eine neue Zeile z.B nach einer bestimmten Zeilennummer anzuhängen?

Ein Plan B wäre natürlich die Daten neu zu sortieren und die Tabelle neu zu zeichnen. Das kommt für mich nicht in Frage, weil das Teil reload frei sein muss, da den Kunden das Flakkern nervt...übrigens neu zeichnen flakkert auch :( Anstrengend in weiss.

Da dachte ich mir mal: Fragst mal nach :-)
 
Zuletzt bearbeitet:
Per lineare suche (iteriere über alle td-Knoten) suchst du nach dem passenden Platz und sobald du ihn gefunden hast, fügst du dort den Knoten per "insertBefore()" ein. Ich schreib mal schnell ein Beispiel falls du es so noch nicht hin bekommst.
 
Hat doch etwas länger gedauert (Ich bin wohl jQuery gewöhnt, da wäre das so simple gewesen...)
Hab jetzt insertRow benutzt.

http://www.cpoly-design.de/table/table.html

Neuen Namen kann man dort einfügen und die werden an die richtige Stelle gesetzt (Case sensitiv, nicht wundern).
Ich denke, wenn nötig ließe sich auch eine binäre suche implementieren.
 
Zuletzt bearbeitet:
Hey! Das sieht ja sehr vielversprechend aus! Vielen Dank für Eure Antworten. Leider geht es im IE (noch) nicht....ich schaue mir mal den Code an und versuche es hinzubekommen.

Der Ansatz ist also der:

1.) Durchlaufen der Tabellezeilen
2.) suchen nach passendem Kriterium
3.) Einfügen

right?
 
HAMMER! Jetzt geht es auch im IE:
HTML: 
		function add() {
			var table 	= document.getElementById('table');
			var rows 	= table.getElementsByTagName("tr");
			var row 	= null;
			var value 	= document.getElementById("txtRowID").value;
			var pos 	= 0;
				
			while(pos < rows.length && rows[pos].getElementsByTagName("td")[0].innerHTML <= value)
				pos++;
				
				var row = table.insertRow(pos);
				var newTd = document.createElement("TD");
				newTd.innerHTML = '<b>NEU</b>';
				row.appendChild(newTd);
		}
Der Schlüssel zum IE liegt in der "AppendChild"-Geschichte. Ich bin so froh! Danke - ihr habt mir den Tag versüßt! :-) XD
 
Was mir aber gerade noch einfällt und warum der Thread noch nicht zu ist:

Die Zeile vor der ich etwas einfügen möchte, hat ja eine bestimmte ID. Kann man darüber nicht viel schneller zugreifen? :D Das hätte ich auch mal früher sagen können, ich weiss :(
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück