JavaScript Row-Counter - Ergebnis direkt ins Dokument eintragen

[Smartass]

Hallo Community,

meine HTML und jQuery Kenntnisse sind wohl etwas eingerostet ... ich verzweifle gerade an für Profis wahrscheinlich einfachen Dingen ... bzw. auch gerade am Foren-Editor ...

Mein Problem: Tabellenreihen sollen gezählt, und das Ergebnis der Zählung in ein Span-Element im Dokument eingetragen werden - die Zählung funktioniert zwar:

$(document).ready(function(){
    $("span").click(function(){
        var rowCount = $("#CSV tr").length;
        document.getElementById("counter").innerHTML = (rowCount - 1 + " Datasets");
    });
});

aber hier logischer- und eben überaus bedauernswerterweise nur per .click auf den Span ...

<span id="counter">XX Dataxxxx</span>

und schaff es nun ums Verrecken nicht, das Ergebnis einfach -eben ohne den Klick!- direkt in das Span-Element zu schreiben. Zum besseren Verständnis und testen das Ganze als JS-Fiddle:

https://jsfiddle.net/hu1mpa9o/1/

Das Ergebnis wird eben erst nach dem Klick auf das hellgrün hinterlegte Span-Element sichtbar. Wenn da also jemand helfen kann und möchte ...

 

[floq0r]

$(document).ready(function(){
    //$("span").click(function(){
        var rowCount = $("#CSV tr").length;
        document.getElementById("counter").innerHTML = (rowCount - 1 + " Datasets");
    //});
});

?

 

[Smartass]

Zuerst Pardon - dh. erstmal Herzlichen Dank dafür ... auch bei den Zustimmern via "Gefällt mir"-Button ... die mir die Code-Änderung letztlich erst verdeutlichten:-D ... nun habe mir da aber offenbar mit dem Fiddle noch selbst ein Bein gestellt: der Code funktioniert jetzt zwar im Fiddle - aber nicht in meiner Anwendung: da wird zusätzlich die Tabelle via JS generiert und der Tabelleninhalt aus einer CSV-Datei geladen ... was Sie natürlich nicht wissen konnten ...

Ergebnis des neuen Codes bei -30 Testzeilen- in meiner Anwendung:

-1 Datasets

Ich fürchte, dass wird noch eine schwere Geburt ... und die Konstruktion eines verständlichen, nachvollziehbaren Beispiels, mit der mir dann schließlich auch geholfen werden kann, wird also um einiges schwieriger werden - und auch einige Zeit in Anspruch nehmen. Jedenfalls nochmal Danke für die promte Antwort.

 

[floq0r]

Dann muss es für das Laden der CSV-Datei ein Callback geben und dort der rowcount festgestellt werden, sonst sind die Daten ja noch nicht da
Die asynchrone Natur von JS ist zunächst gewöhnungsbedürftig...
Brauchbare Stichworte: Callback, async function, await

 

[Smartass]

Nicht nur das Konzept, vor allem die Syntax von JS ist für mich unglaublich schwer zu durchschauen - hab mich da gerade ein wenig zu den Stichwörtern eingelesen ... also entweder räum ich die Anwendung zu Demonstrationszwecken ab -wie ein Rudel Kinder am 24sten den schokobehangenen Christbaum- auf das nackte Gerüst sozusagen, wo dann nur noch

<script type="text/javascript" src="scr/jquery.js"></script>
<script type="text/javascript" src="scr/csvtable.js"></script>
<script type="text/javascript" src="scr/rowcount.js"></script>

+ einer CSV-Datei und ein wenig HTML überbleibt - lade das dann hoch, und stelle die Frage erneut - oder, ich mach's wie die Profis;-) ... mache aus der Zeichenkette im Platzhalter

<span id="counter">XX Dataxxxx</span>

vielleicht ein Zahnrad-Icon, das auf das ja den Klick genauso reagiert - also mit dem ursprünglichen Code, und lasse also die Anzahl der Tabellenreihen + dem last Modified Zeitstempel des Dokuments -damit's also nicht ganz so blöd wirkt - und dabei ist die Anwendung nur für mich:-D- in einem wieder wegklickbaren Div erscheinen.

 

[floq0r]

Ich kann dir bedauerlicherweise nicht folgen

 

[abcddcba]

ich hab das Ziel noch nicht so ganz verstanden. Wenn du sowieso erst per JS eine CSV Datei laden willst um eine HTML Tabelle zu befuellen, warum genau kannst du dann nicht direkt dort die Anzahl der Zeilen zaehlen, statt dann im gerenderten HTML von der Tabelle die Zeilen zu zaehlen? Und warum kannst du dann nicht direkt nachdem die CSV Datei geladen wurde und die HTML Tabelle gerendert, einfach noch in einem anderen HTML Element die Anzahl anzeigen?

Aber vermutlich verstehe ich noch nicht so ganz das Ziel und/oder Problem?

 

[Smartass]

# floq0r

Scheint tatsächlich so zu sein, dass man da nicht viel mehr als zB. noch einen Link anhängen kann ... da direkt eine weitere JS-Funktion dranzuhängen dürfte zumindest nicht so einfach -bis unmöglich?- sein.

$(document).ready(function(){
    $("span").click(function(){
        var rowCount = $("#CSV tr").length;
        document.getElementById("counter").innerHTML = (rowCount - 1 + " Datasets"
        + " \<a href=\"#x\">Link</a>\ ");
    });
});

# abcddcba

Diese Anwendung ist ja längst fertig - wird nur noch modifiziert. Was ich also bräuchte, wäre einfach nur ein Zählscript, das nachdem das HTML geladen ist, die Anzahl der Tabellenzeilen in ein Html-Element schreibt.

Ps. Siehe Beitrag #3 - 16:43 ... die Tabelle wird ja erst via JS generiert - und der Tabelleninhalt aus einer CSV-Datei geladen ...

 

[marcOcram]

Einmal mit Kanonen auf Spatzen, aber die Lösung wird sehr wahrscheinlich funktionieren, ganz gleich wann der Inhalt der Tabelle geladen wird.

https://jsfiddle.net/2va59s06/

$(document).ready(function() {
  // the table
  const table = $("table#CSV")
  // the counter element
  const counter = $("#counter");
  // the function to count data
  const count = function() {
    counter.html(table.find("tr").length - 1 + " Datasets");
  };

  // count on change of table
  const observer = new MutationObserver(count);
  observer.observe(table[0], { childList: true, subtree: true });
 
  // count once manually
  count();
});

 

[Smartass]

Herzlichen Dank ... könnte noch ein toller Thread zu Thema Tabellenzeilenzählen werden ...

Allerdings verhindert das Script ==Edit: hier stand Unsinn== überhaupt das laden der Anwendung - kurz: die Seite bleibt weiß. Wenn ich mit dem Code rumspiele -ihn defacto unbrauchbar mache, scheint als bestmögliches Ergebnis wieder nur:

... möglich. Also wie gehabt. Trotzdem nochmal Danke! Und wahrscheinlich nützt es ja noch jemand anderem.