Steuerelement in HTML-Tabelle

[A Former User]

@Glasfaser

Hier meine Tabelle, wofür ich die Buttons verwende. Ich hab nur ein paar Tabellenzeilen der Übersichtlichkeit wegen rausgelöscht.

Spoiler

<table border="1">
 <tr>
   <td class="FirstColoumnFormat" align="center">Waschmaschine</td>   
   <td class="LineFormat" align="center"><b>{sonoff.0.WaschMaschine.INFO.IPAddress}</b></td>
   <td class="LineFormat" align="center"><b>{sonoff.0.WaschMaschine.Wifi_RSSI}%</b></td>
   <td class="LineFormat" align="center"><b>{sonoff.0.WaschMaschine.INFO.Hostname}</b></td>
   <td class="LineFormat" align="center"><b>{sonoff.0.WaschMaschine.Time;date(DD.MM.YY hh:mm)}</b></td>
   <td>
       <button value="Waschmaschine" onClick="setOnClickCustom(value)">{v:sonoff.0.WaschMaschine.POWER;v == "true" ? "An":"Aus"}</button>
   </td> 
 </tr> 
 <tr>
   <td class="FirstColoumnFormat" align="center">ZBox</td>   
   <td class="LineFormat" align="center"><b>{sonoff.0.ZBox.INFO.IPAddress}</b></td>
   <td class="LineFormat" align="center"><b>{sonoff.0.ZBox.Wifi_RSSI}%</b></td>
   <td class="LineFormat" align="center"><b>{sonoff.0.ZBox.INFO.Hostname}</b></td>
   <td class="LineFormat" align="center"><b>{sonoff.0.ZBox.Time;date(DD.MM.YY hh:mm)}</b></td>
   <td>
       <button value="ZBox" onClick="setOnClickCustom(value)">{v:sonoff.0.ZBox.POWER;v == "true" ? "An":"Aus"}</button>
   </td> 
 </tr> 
 <tr>
   <td class="FirstColoumnFormat" align="center">Wasserkocher</td>   
   <td class="LineFormat" align="center"><b>{sonoff.0.Wasserkocher.INFO.IPAddress}</b></td>
   <td class="LineFormat" align="center"><b>{sonoff.0.Wasserkocher.Wifi_RSSI}%</b></td>
   <td class="LineFormat" align="center"><b>{sonoff.0.Wasserkocher.INFO.Hostname}</b></td>
   <td class="LineFormat" align="center"><b>{sonoff.0.Wasserkocher.Time;date(DD.MM.YY hh:mm)}</b></td>
   <td>
       <button value="Wasserkocher" onClick="setOnClickCustom(value)">{v:sonoff.0.Wasserkocher.POWER;v == "true" ? "An":"Aus"}</button>
   </td> 
 </tr>    
</table>

<script>
function setOnClickCustom(val) {
   var objID;
   if (val == "Waschmaschine") {
       objID = "sonoff.0.WaschMaschine.POWER";
   }
   if (val == "Wasserkocher") {
       objID = "sonoff.0.Wasserkocher.POWER";
   }
   if (val == "ZBox") {
       objID = "sonoff.0.ZBox.POWER";
   } 
   servConn.getStates(objID, (error, states) => {
       console.log(states);
       servConn.setState(objID, !states[objID].val);
   });
}
</script>

[liv-in-sky]

@HeinrichB

wie sieht den der button in der tabelle aus - magst du ein bild zeigen - ich würde ein z.b. für toggle genutzt oder

[A Former User]

@liv-in-sky Der ist aktuell sehr primitiv noch

Funktioniert aber; jedoch muss man der Tabelle etwas Zeit beim ersten Mal lassen /2-3sec., da die Bindings etwas brauchen

[liv-in-sky]

@HeinrichB ah - der button wird bei mir nicht angezeigt - da habe ich wohl wieder einen kleinen "unsichtbaren" fehler

[liv-in-sky]

@HeinrichB

wenn mal die muse stimmt, werde ich mal versuchen, dass in mein sonoff script zu integrieren

[A Former User]

@liv-in-sky Was ein Performance-Problem werden könnte, zumindestens bei mir, sind die Bindings. ich habe meine Tabelle bspw. auf zwei aufbrechen müssen, damit alle geladen wurden. Aber das ist ja ein bekanntes Problem. Das schläft sich auch auf die Buttons durch, dass sie bei vielen Zeilen dann wohl nicht immer direkt reagieren. Aber das muss ich noch genauer beobachten. Manchmal läuft auch der Chrome bei mir voll, und ich muss einmal alles neu öffnen und dann rennt es wieder

[liv-in-sky]

@HeinrichB du hast auch ein anderes vorgehen wie bei meinen scripts - bei mir werden diese tabellen immer wieder erzeugt - z.b minütlich - in der tabelle selbst steht bei mir kein binding sondern nur statisch werte. wenn ich den toggle knopf drücke, muss das script in der html-tabelle das hauptscript (die ja völlig getrennt sind) erst triggern, damit ich den wert sehe (oder eine minute warten bis der wert wieder ausgelesen und in der tabelle verarbeitet ist) - dazu benötige ich einen extra datenpunkt, den das haupt-tabellenscript überprüft, bzw der es triggert. dann wären die werte sofort sichtbar

bei deinem script, zeigt das binding die werte

du hast sozusagen eine statische tabelle mit dynam. binding
ich nutze eine dynamische tabelle mit stat. werten, die immer einen trigger brauchen um aktuell zu sein

[A Former User]

@liv-in-sky

Danke, ich hab einfach mit meinem Wissen das beste rausgeholt. Das geht bestimmt wesentlich eleganter und generischer.

[Glasfaser]

@HeinrichB sagte in Steuerelement in HTML-Tabelle:

@Glasfaser

Hier meine Tabelle,...….

sehr schöne Vorlage und funktioniert gut .

Danke

[A Former User]

@Glasfaser Freut mich