[GELÖST] HTML innerhalb Zellen sortieren

Mr.Vain · 07. Sep. 2016

Hallo,

habe folgende HTML Tabelle:

===============
= Spalte1 = Spalte 2 =
===============
= abc =
= gfr = fg, ad, gf
= dff =
===============
...

Möchte gerne via Javascript den Inhalt aller Zellen von beiden Spalten alphabetisch sortieren. Könnt ihr mir hier helfen?

Die Zellen in Spalte1 haben Werte mit "ENTER" getrennt. Die Zellen in Spalte2 haben Werte komma-getrennt.

mikdoe · 07. Sep. 2016

ist die tabelle im dom schon fertig oder gibt es rohdaten?

Mr.Vain · 07. Sep. 2016

Ja die Tabelle ist fertig.

Hier ein Beispiel:

HTML:

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-031e">Spalte1</th>
    <th class="tg-yw4l">Spalte2<br></th>
    <th class="tg-yw4l">Spalte3<br></th>
  </tr>
  <tr>
    <td class="tg-yw4l">2</td>
    <td class="tg-yw4l">Hallo<br>dies<br>sind<br>meine<br>Zeilen</td>
    <td class="tg-yw4l">a, j, t, g, z, b</td>
  </tr>
  <tr>
    <td class="tg-yw4l">3</td>
    <td class="tg-yw4l">ja<br>das<br>ist<br>so<br></td>
    <td class="tg-yw4l">b, n, d, e, a<br></td>
  </tr>
</table>

mikdoe · 07. Sep. 2016

hast du darauf einfluss? ansonsten musst du die tabelle nämlich aus dem dom erst auslesen. das braucht zeit. mit rohdaten könnte man diesen schritt ersatzlos weglassen.

wenn die daten in einem objekt stecken kann man sie sortiert in das dom schreiben wie z. b. hier gezeigt: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

andreax · 08. Sep. 2016

Damit die Sortierung funktioniert füge noch eine Klasse sortme zum td welches du sortiern willst.

HTML:

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		
<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
	</head>
	<body>
<table class="tg">
  <tr>
    <th class="tg-031e">Spalte1</th>
    <th class="tg-yw4l">Spalte2<br></th>
    <th class="tg-yw4l">Spalte3<br></th>
  </tr>
  <tr>
    <td class="tg-yw4l">2</td>
    <td class="tg-yw4l sortme">Hallo<br>dies<br>sind<br>meine<br>Zeilen</td>
    <td class="tg-yw4l sortme">a, j, t, g, z, b</td>
  </tr>
  <tr>
    <td class="tg-yw4l">3</td>
    <td class="tg-yw4l sortme">ja<br>das<br>ist<br>so<br></td>
    <td class="tg-yw4l sortme">b , n, d o,  e, a </td>
    <td class="tg-yw4l sortme">OOO , CCC, ZZ Z,  EEE, AAA </td>
    <td class="tg-yw4l sortme">UUU , AAA, QQQ ,  DLL   , AMA </td>
  </tr>
</table>	
<script>
function myTrim(x) {
 return x.replace(/^\s+|\s+$/gm,'');
}
function sortMe(del){
var so = document.querySelectorAll('.sortme');
var i = 0;
var da =[];
while(i < so.length)
{
da = so[i].innerHTML.split(del);
for(ws in da){
da[ws]= myTrim(da[ws]);
}
da.sort();
so[i].innerHTML = da.join(del);
i++;
}
}
sortMe(',');
sortMe('<br>');
</script>

</body>
</html>

Mr.Vain · 08. Sep. 2016

Danke für deinen Code.

Habe diesen 1:1 in eine sortme.js Datei eingefügt. Anschließend in der HTML-Datei (im gleichen Verzeichnis) <script src="sortme.js"></script> hinzugefügt und in der Tabelle folgendes eingefügt:

<td class="sortme"> DDD, AAA, ZZZ, QQQ</td>

Sortierung funktioniert leider noch nicht.

kkapsner · 08. Sep. 2016

Code:

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-031e">Spalte1</th>
    <th class="tg-yw4l">Spalte2<br></th>
    <th class="tg-yw4l">Spalte3<br></th>
  </tr>
  <tr>
    <td class="tg-yw4l">2</td>
    <td class="tg-yw4l">Hallo<br>dies<br>sind<br>meine<br>Zeilen</td>
    <td class="tg-yw4l">a, j, t, g, z, b</td>
  </tr>
  <tr>
    <td class="tg-yw4l">3</td>
    <td class="tg-yw4l">ja<br>das<br>ist<br>so<br></td>
    <td class="tg-yw4l">b, n, d, e, a</td>
  </tr>
</table>
<script>
Array.from(document.querySelectorAll("table.tg td")).forEach(function(td){
	console.log(td);
	if (td.childNodes.length === 1){
		td.firstChild.nodeValue = td.firstChild.nodeValue
			.split(/\s*,\s*/)
			.map(function(value){return value.trim();})
			.sort()
			.join(", ");
	}
	else {
		var textNodes = Array.from(td.childNodes)
			.filter(function(node){return node.nodeType === 3;})
			.sort(function(nodeA, nodeB){
				var valueA = nodeA.nodeValue.trim().toLowerCase();
				var valueB = nodeB.nodeValue.trim().toLowerCase();
				if (valueA > valueB){
					return 1;
				}
				else if (valueA < valueB){
					return -1;
				}
				else {
					return 0;
				}
			});
		td.innerHTML = "";
		textNodes.forEach(function(node){
			td.appendChild(node);
			td.appendChild(document.createElement("br"));
		});
	}
});</script>

andreax · 08. Sep. 2016

Mr.Vain schrieb:
Danke für deinen Code.

Habe diesen 1:1 in eine sortme.js Datei eingefügt. Anschließend in der HTML-Datei (im gleichen Verzeichnis) <script src="sortme.js"></script> hinzugefügt und in der Tabelle folgendes eingefügt:

<td class="sortme"> DDD, AAA, ZZZ, QQQ</td>

Sortierung funktioniert leider noch nicht.

Hast du das script tag im head der seite eingefügt?

eine bewährte Methode wäre es den script vor dem schließendem body tag einzufügen
weil man dann sicher gehen kann das alle Seiteninhalte schon vor der Ausführung des Scripts geladen sind.
Ich habe meinen letzten Post von heute Mittag nun das komplette html Listening so wie ich es getestet habe
eingetragen.

MFG

Mr.Vain · 09. Sep. 2016

Vielen Dank, hat geklappt!

mikdoe · 09. Sep. 2016

gelöst?

kkapsner · 09. Sep. 2016

@andreax: Ich sehe ein paarProbleme mit deiner Lösung: zum einen wird da doch die Zeilensortierung noch nicht gemacht, dann läuft das ganze unnötiger Weise im globalen Scope und außerdem werden Leerzeichen innerhalb eines Eintrags (z.B. bei so etwas "d, b c, a") entfernt, was sicherlich nicht erwünscht ist (beim Beispiel soll "a, b c, d" und nicht "a, bc d" rauskommen).

andreax · 09. Sep. 2016

Danke für dein Feedback.

Mr.Vain · 12. Sep. 2016

jepp, gelöst. Danke an allen

kkapsner · 12. Sep. 2016

Mr.Vain schrieb:
Danke an allen

Bitte - gern geschehen.

[GELÖST] HTML innerhalb Zellen sortieren

Mr.Vain

New member

mikdoe

Moderator

Mr.Vain

New member

mikdoe

Moderator

andreax

Guest

Mr.Vain

New member

kkapsner

Super Moderator

andreax

Guest

Mr.Vain

New member

mikdoe

Moderator

kkapsner

Super Moderator

andreax

Guest

Mr.Vain

New member

kkapsner

Super Moderator