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.