Frage Text aus Tabelle in Zwischenablage

colaholiker · 2 Juli 2023

Hallo allerseits,

ich stelle auf einer Webpage ein Directory als Tabelle dar.
In Spalte 1 stehen immer die Dateinamen oder "Dir" für einen Unterordner.
Ich habe eine weitere Spalte (Nr4) dazugesetzt in der es pro Eintrag einen Button gibt.
Damit möchte ich den Dateinamen in Spalte1 wie im Thema gesagt, in die Zwischenablage bekommen.

Im Netz gibt es Beispiele die laufen, wenn der Text in einem Textfeld steht, aber das tut meiner ja nicht. Dabei ist die ID des Textfelds der Schlüssel.
Ich hab auch ein Textfeld in die Tabelle bekommen, aber sowas sieht... nicht aus.
Ein Beispiel fand ich wo ein "normaler" Text in einem Feld der Tabelle ersetzt wird, also das Umgekehrte was ich brauche.
Aber so hab ich erfahren daß auch <td> eine ID haben kann.
Also:
<td id="cp">mein Dateiname.pdf</td>
und als Button etwa
<td><button type ="button" onclick="Copy()">Dateiname kopieren</button></td>
...
function "Copy() {
var copyText = document.getElementById("cp");
...
bekomme ich nicht zum laufen, weil die Variable "copyText" leer bleibt.
Das Beispiel wo der Tabelleneintrag ersetzt wurde nutzte ".innerHTML".
Aber das hilft mir bisher nicht.

Weiß jemand wie ich das hinbekomme? Evtl. ist ja <td id="cp"... eine Sackgasse?

Anschlußfrage: ich muß zeilenweise sicher die ID ändern (ID01...).
Wie stelle ich es dann an, nur eine Funktion dafür zu brauchen?
vielen Dank.

Oliver77 · 2 Juli 2023

Code:

document.getElementById("cp").innerHTML

Müsste eigentlich funktionieren....

colaholiker · 2 Juli 2023

Ja funktioniert im Prinzip (läuft durch).
Aber in der Zwischenablage steht: "undefined".

Wäre auch zu schön :-(

Oliver77 · 2 Juli 2023

Achso du willst es in der Zwischenanlage haben:

Javascript:

<script>
  function copyToClipboard() {
    var copyText = document.getElementById("content").value;
    navigator.clipboard.writeText(copyText).then(() => {
        // Alert the user that the action took place.
        // Nobody likes hidden stuff being done under the hood!
        alert("Copied to clipboard");
    });
  }
</script>

von hier: https://stackabuse.com/how-to-copy-to-clipboard-in-javascript-with-the-clipboard-api/

statt value musst du innerHTML nehmen.
Oder eher innerText

colaholiker · 2 Juli 2023

Hi,
jetzt klappt es, mit innerText. Es geht auch mit innerHTML, da hatte ich vorher schon umsonst probiert, evtl. wg. Syntaxfehlern...

Jetzt bin ich nur noch scharf drauf, für 'zig Zeilen mit einer Funktion auszukommen.

Wenn die IDs durchnummeriert sind (cp01...) und die Buttons auch (ID="btn01"...) klappt es evtl, die ID des Textes aus der Button-ID zu ergänzen...oder so.

Vielen Dank Qliver.

Oliver77 · 2 Juli 2023

kannst du den gesamten Code mal posten?

Sclero2004 · 2 Juli 2023

Wenn die IDs durchnummeriert sind (cp01...) und die Buttons auch (ID="btn01"...) klappt es evtl, die ID des Textes aus der Button-ID zu ergänzen...oder so.

Ich denke schon, dass es auf diese Weise klappen würde aber besonders elegant finde ich solch eine Lösung nicht.
Mein Vorschlag: Im DOM navigieren, um vom Button auf die Zelle in Spalte 1 zu kommen, in etwa so (ungetestet):

Code:

window.addEventListener('click', event=> {
    // event.target ist das Element das geklickt wurde
    // Prüfen ob der Button für das Kopieren
    // in die Zwischenablage gedrückt wurde
    if (event.target.matches('table button')) {
        const
            // Vom Button ausgehend die Tabellenzeile ermitteln
            row = event.target.closest('tr')
            // und die Zelle mit dem Dateinamen
            // dazu müssen wir dieser jeweils
            // die Klasse "td-filename" geben
            nameCell = row.querySelector('.td-filename');
        // Jetzt haben wir die Zelle und können daraus den Text auslesen
    }
})

Dann braucht der Button weder Klasse noch ID, nur die Zelle mit dem Dateinamen eine Klasse.
Man könnte das auch mit nth-child machen aber das ist IMO unübersichtlicher und unflexibel, wenn sich die Position der Spalte ändern sollte.

colaholiker · 2 Juli 2023

@Oliver77
Das ist schwer, der wird mit C++ erst erzeugt, je nach Länge des Directorys.
Und Du willst nicht den ganzen Style-Block im head sehen!

Momentan hab ich das Ganze in den Code eingefügt und es klappt natürlich garnicht.
Immerhin zählen die Button- IDs richtig hoch, die der TDs aber nicht.
Die weitere Fehlerbereinigung mache ich wohl erst morgen Mittag weiter. Das ist jedes Mal Stress wenn ich im Browser den Quelltext ansehe: das ist eine Zeile!

Was ich aber gemerkt habe: im C++-Code muß ich ' statt " setzen, und die -'- bleiben auch im HTML-Code so (also 'Button' statt "Button") -und das läuft trotzdem!

colaholiker · 2 Juli 2023

@Sclero2004

Sclero2004 schrieb:
aber besonders elegant finde ich solch eine Lösung nicht.

-kann man sagen wenn man Profi ist, aber ich bin schon auch Deiner Meinung.
Erstmal, wie ich Oliver schrieb, möchte ich das Erreichte mal zum laufen bringen. Die IDs mit den Zeilennummern werden wohl nicht stören, auch wenn ich Deinen Vorschlag annehme.

Ich bin ja noch lange nicht durch mit dem Projekt. Einige Tabellenzeilen enthalten z.B. Unterordner, die müssen geöffnet und geschlossen werden, Files in diese geladen oder dort gelöscht werden. Bis jetzt sind dort "Hello World"-Buttons drin (die im "heißen Test" auch nicht wollen). Daher werde ich die IDs evtl. noch für solche Vorgänge brauchen.
Das komplette Directory-Handling ist noch ein langer Weg und ich werde Deinen Vorschlag erst testen können wen das Bisherige läuft.
Aber eine Rüchmeldung kommt!

Sclero2004 · 3 Juli 2023

Mir fällt noch dieses auf:

Das ist jedes Mal Stress wenn ich im Browser den Quelltext ansehe: das ist eine Zeile!

Versuche es mit dem HTML-Inspektor, dann wird dir das HTML sehr schön baumförmig formatiert angezeigt. Unverzichtbar wenn man eine Website entwickelt.

https://wiki.selfhtml.org/wiki/Grundlagen/Webprojekte/testen#Arbeiten_mit_dem_Seiteninspektor

colaholiker · 3 Juli 2023

Sclero2004 schrieb:
Versuche es mit dem HTML-Inspektor,

* meinst Du das Browser- eigene Werkzeug (Firefox: Rechtsklick - Untersuchen(Q))?
Damit fällt mir schwer umzugehen, ich kenne die meisten Begriffe nicht. Ja, man bekommt unten links eine gut gegliederte Anzeige, aber nur als Grob-Überblick und in Briefmarkengröße.
* Oder meinst Du so ein Online-Tool wo man seinen Code reinkopiert?
https://www.freeformatter.com/html-validator.html hab ich probiert. Da bleibt der Code unformatiert, aber ich bekomme 57 Fehlermeldungen wie "Zeile1, Zeichen 4000 ff".

Ich räufel meinen Code erstmal in Notepad++ auseinander, vorläufig.
Nächste Schritte:
- meinen C++ Code nochmal durchgehen,
- ist es normal daß die -'- in C++ nicht zu -"- in HTML umgewandelt werden,
- und komisch: das Kopieren in die Zwischenablage von der mit C++ generierten Directory-Page klappt nicht, aber als Quelltext (diese eine Zeile) im Browser, dann ins Notepad++ kopiert, unter Dateiname.htm abgespeichert und dann wieder in den Browser geladen kann ich die Variable in den Zwischenspeicher kopieren!
Wenn das ein Pfad-Problem ist (externer Microcontroller lädt Directory-Page in den Browser), habe ich noch viel mehr zu tun als gedacht:-(

Sclero2004 · 3 Juli 2023

meinst Du das Browser- eigene Werkzeug (Firefox: Rechtsklick - Untersuchen(Q))?

Genau das meine ich. Die Anzeige des HTML bzw. DOM ist keineswegs grob sondern sehr detailliert und Du kannst alles was dich gerade interessiert, auf klappen.
Und wenn dieses Fenster bei dir nur briefmarkengroß ist, kannst Du es jederzeit größer ziehen.

msi · 3 Juli 2023

colaholiker schrieb:
Das ist jedes Mal Stress wenn ich im Browser den Quelltext ansehe: das ist eine Zeile!

Wieso nur eine Zeile?

colaholiker · 4 Juli 2023

msi schrieb:
Wieso nur eine Zeile?

Tja, der Code wird aus C++ generiert, dann steht halt alles hintereinander. Nicht strukturierten HTML- Code habe ich aber schon von "richtigen" Webseiten gesehen.
Ich glaube es gibt ein Zeichen um Zeilenumbrüche zu erzeugen (war das "/"?), damit könnte ich den C++-Code evtl. ergänzen.

Sclero2004 · 4 Juli 2023

Ich glaube es gibt ein Zeichen um Zeilenumbrüche zu erzeugen (war das "/"?)

Da bist Du schon nahe dran, mit \n kannst Du einen Zeilenumbruch in einen String einfügen. Ist nur die Frage ob sich die Mühe lohnt, denn neben den Zeilenumbrüchen müsste man auch die Einrückungen hinzu fügen. Wenn man HTML entwickelt, kommt man ohnehin kaum ohne die Entwicklerwerkszeuge aus und die formatieren das automatisch.

colaholiker · 4 Juli 2023

Sclero2004 schrieb:
...Die Anzeige des HTML bzw. DOM ist keineswegs grob sondern sehr detailliert und Du kannst alles was dich gerade interessiert, auf klappen.

Stimmt, da kommt gleich die nächste Fragen auf:
- ich lese dort <tbody> ...meine Tabelle... </tbody>
obwohl das nicht in meinem HTML-Code steht. Heißt das, tbody fehlt in meinem Code?

Zu Deinem Vorsclag in Posting Nr.7 passend:
Ich könnte recht einfach mit den Buttons die Function Copy() (s. mein Startposting)

colaholiker schrieb:
<td><button type ="button" onclick="Copy()">Dateiname kopieren</button></td>

so aufrufen, daß der Text Spalte1 als Funktionsparameter erscheint: Copy(mein_Dateiname_in_dieser_Zeile).

Aber geht das überhaupt, in der Funktion deren Parameter in eine Variable umzuwandeln?
Im Netz habe ich nichts dazu gefunden.

Sclero2004 · 4 Juli 2023

- ich lese dort <tbody> ...meine Tabelle... </tbody>
obwohl das nicht in meinem HTML-Code steht. Heißt das, tbody fehlt in meinem Code?

Genau, das fehlt, eine Tabelle braucht ein tbody und wenn sie nicht im HTML steht, fügt der Browser sie automatisch hinzu.

colaholiker schrieb:
Ich könnte recht einfach mit den Buttons die Function Copy() (s. mein Startposting)

colaholiker schrieb:

<td><button type ="button" onclick="Copy()">Dateiname kopieren</button></td>

Zum Vergrößern anklicken....

so aufrufen, daß der Text Spalte1 als Funktionsparameter erscheint: Copy(mein_Dateiname_in_dieser_Zeile).

Du kannst der Funktion Copy auch bei dieser Notation das event übergeben:

Code:

onclick="Copy(event)"

dann steht dir in event.target das geklickte Element, in diesem Fall der Button, zur Verfügung und Du hast die Möglichkeit, genau wie in meinem Code in #7 daraus die Tabellenzelle mit dem Namen zu ermitteln.

colaholiker · 4 Juli 2023

Sclero2004 schrieb:
Da bist Du schon nahe dran, mit \n kannst Du einen Zeilenumbruch in einen String einfügen. Ist nur die Frage ob sich die Mühe lohnt, denn neben den Zeilenumbrüchen müsste man auch die Einrückungen hinzu fügen. Wenn man HTML entwickelt, kommt man ohnehin kaum ohne die Entwicklerwerkszeuge aus und die formatieren das automatisch.

Ja \n, da war ich vor ein paar Monaten bei. Aber ich werde ja gerade für "die Entwicklerwerkszeuge" abgerichtet

msi · 4 Juli 2023

Sclero2004 schrieb:
Ist nur die Frage ob sich die Mühe lohnt

Ich denke schon, denn ein paar \n einzufügen ist ja kein Problem, einmal Compilieren und Linken auch nicht. So hat man zumindest halbwegs lesbaren HTML-Code.
Aufwändiger wird es nur, wenn man auch noch Tidy-HTML einsetzen will, dann muss man eine zusätzliche Library erzeugen, aber auch das sollte für einen erfahrenen Programmierer kein unlösbares Problem darstellen.

colaholiker · 4 Juli 2023

Ich habe jetzt mal Deinen Code aus Posting7 in eine Funktion gesetzt:

function Copy() {
window.addEventListener('click', event=> {
// event.target ist das Element das geklickt wurde
// Prüfen ob der Button für das Kopieren
// in die Zwischenablage gedrückt wurde
if (event.target.matches('table button')) {
const
// Vom Button ausgehend die Tabellenzeile ermitteln
row = event.target.closest('tr')
// und die Zelle mit dem Dateinamen
// dazu müssen wir dieser jeweils
// die Klasse "td-filename" geben
nameCell = row.querySelector('.td-filename');
// Jetzt haben wir die Zelle und können daraus den Text auslesen
alert("nameCell: " + nameCell);
}
})
}

Dabei wird "nameCell: null" angezeigt.
Die gesuchte Zeile wäre (Tabellenkopf mitgezählt) 3.
Also wäre event.target.closest('tr') = Spalte3?
Dann sollte die alert-Ausgabe "3" sein?

dann: wie komme ich mit
nameCell = row.querySelector('.td-filename');
auf die erste Spalte?

und dann
var Text = document.getElement.td(nameCell).innerText;
Hach. Ist nicht einfach.

Ich baue jetzt ersmal <tbody> ein, evtl. kommt "null" ja daher...

Frage Text aus Tabelle in Zwischenablage

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied