schreiben in Tabelle

[colaholiker]

Guten Morgen,

ich gebe hier Daten auf einer Webseite aus, die als Tabelle formatiert sind.

Die Daten (Temperaturen) werden nur in die mittlere der 3 Spalten geschrieben.
Die Datenmenge (=Zeilenzahl) ist flexibel, Header und letzte Zeile jedoch immer vorhanden.
Daher werden die Temp- Zeilen mit js erzeugt und im Bedarfsfall gelöscht und der neuen Anzahl angepaßt.

<table id='Ws001_Sp3_Tb'>
    <tr id = 'Ws001_Sp3_Tb_z1'>
        <th colspan='3'><u>Sensorwerte</u></th>
    </tr>
    <!-- letzte Zeile 'Strom' immer vh -->                   
    <tr class='TbSbWs001_Sp3_tbz' id='sbxZL'>
        <td class= 'sp2td' id='Sp3_x1'>Strom</td>
        <td class= 'sp2td' id='Sp3_x2'>1.6</td>
        <td class= 'sp2td' id='Sp3_x3'>A</td>
    </tr>
</table>

#Ws001_Sp3_Tb {
    width: 90%;
    margin-top: 10px;
    background-color: black;
    color: white;
    text-align: center;
    border: hidden;
    border-collapse: collapse;   
}
/* Ws001 Sp.3 class entsteht in js */
.sp2td {
    color: lightblue;
    width: auto;   
}
.sp2inp:hover {
    background-color: blue;
}

function anzeigeTemp(allTmp) {
    if( allTmp != 'warten::' && allTmp != 'oWb::aus') {
        const
            tb   = document.getElementById('Ws001_Sp3_Tb'),
            cl   = document.getElementById('Ws001_Sp3_Tb').rows[1].cells[0],
            tl   =     tb.getElementsByTagName('tr').length,
            data = allTmp.split("::"),
            zn   = data.length;

        // Tabelle nach Array erstellen
        //-- Tb neubauen wenn andere Anz.Daten
        if( tl != zn+2) {
            if( tl != 2) {    // nur deleten wenn Temps vh
                for (let i = 0; i < zn; i++) {
                    tb.deleteRow(1+i);
                }
            }           
            for (let i = 0; i < zn; i++) {
                var row = tb.insertRow(i+1);
                    row.setAttribute('class', 'sp2td');
                var cell1 = row.insertCell(0);
                    cell1.setAttribute('class', 'sp2inp');
                    cell1.setAttribute('id', 'sp2cl' + i+1);
                    cell1.innerHTML = 'Temp';
                var cell2 = row.insertCell(1);
                    cell2.setAttribute('id', 'sp2' + i+1);
                var cell3 = row.insertCell(2);
                    cell3.innerHTML = '&deg;C';   
            }
        }
        //-- Daten
        if( tl > 2) {
            for (let i = 0; i < zn; i++) {
                document.getElementById('sp2' + i+1).innerHTML = data[i].substring(data[i].indexOf("::"));
            }
        }
    }   
}

Das alles funktioniert.

Jetzt möchte ich aber in die Zellen 'Temp' (hab im Bild zur Anschauung mal eine Zelle gehovert) direkt reinschreiben und den neuen Text verarbeiten (speichern und das nächste Mal mit js statt 'Temp' eintragen lassen).

Meine Vorstellung ist, den Cursor reinzusetzen, Text eingeben und mittels 'danebenklicken' den Fokus aus der Zelle zu entfernen und damit die Textvariable zu bekommen.

Das funktioniert bestimmt mit Input- oder Textfeldern usw., aber weil ich jede Tabellenzeile mit js erzeuge, wollte ich mal fragen was am wenigsten umständlich wäre.
TIA, c.

 

[colaholiker]

... ich habs mit der Input-Box probiert, das funktioniert auch.
Beim Klicken in eine Box zeigt mir mein Eventlistener die ID.
Verlasse ich deren Fokus erreiche ich eine Funktion.
In js statt

cell1.innerHTML = 'Temp';

var di = cell1;
var FN = document.createElement("input");
FN.setAttribute("type", "text");
FN.setAttribute("name", "Temp");
FN.setAttribute("placeholder", "Temp");
FN.setAttribute('class', 'sp2cl_tf');
FN.setAttribute('id', 'sp2cl_txt' + i+1);
FN.setAttribute('onfocusout', 'lostFocus()');
di.appendChild(FN);

einsetzen. 'onfocusout' startet die Funktion 'lostFocus()'.

Die restl. Attribute mache ich in css, da ich den erzeugten Zeilen eine Klasse und IDs zugewiesen habe.

Die beklickte ID muß ich also im Eventlistener speichern und dann in der lostFocus-Funktion wieder auslesen (Sessionspeicher?).
So sieht die Tabelle jetzt aus:

Der Rest ist css-Sache. Werde dort weiterfragen wenn ich die Probleme nicht wegbekomme.

Später wird dann noch das Scrollen interessant, wenn es viele Datensätze gibt. Ich möchte dann nur die 'Temp'- Zeilen scrollen...
c.