Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Steuerelement in HTML-Tabelle

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    12
    1
    123

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    4.3k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.2k

Steuerelement in HTML-Tabelle

Scheduled Pinned Locked Moved Visualisierung
vis
45 Posts 5 Posters 3.9k Views 9 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • GlasfaserG Glasfaser

    @HeinrichB

    Könntest du vielleicht dein ganzes Skript zur Verfügung stellen , da es ja jetzt bei dir funktioniert !?
    Bin ja auch gerne am Basteln ;)

    liv-in-skyL Offline
    liv-in-skyL Offline
    liv-in-sky
    wrote on last edited by liv-in-sky
    #35

    @Glasfaser ist das nicht hier - ist ein wenig hin und her zwischen den threads

    https://forum.iobroker.net/post/373006

    nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

    1 Reply Last reply
    0
    • GlasfaserG Glasfaser

      @HeinrichB

      Könntest du vielleicht dein ganzes Skript zur Verfügung stellen , da es ja jetzt bei dir funktioniert !?
      Bin ja auch gerne am Basteln ;)

      ? Offline
      ? Offline
      A Former User
      wrote on last edited by
      #36

      @Glasfaser

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

      <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-skyL GlasfaserG 3 Replies Last reply
      1
      • ? A Former User

        @Glasfaser

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

        <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-skyL Offline
        liv-in-skyL Offline
        liv-in-sky
        wrote on last edited by
        #37

        @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 🔀

        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

        ? 1 Reply Last reply
        0
        • liv-in-skyL 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 🔀

          ? Offline
          ? Offline
          A Former User
          wrote on last edited by A Former User
          #38

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

          Bildschirmfoto 2020-02-07 um 13.39.43.JPG

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

          liv-in-skyL 1 Reply Last reply
          0
          • ? A Former User

            @Glasfaser

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

            <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-skyL Offline
            liv-in-skyL Offline
            liv-in-sky
            wrote on last edited by liv-in-sky
            #39

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

            nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

            ? 1 Reply Last reply
            0
            • ? A Former User

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

              Bildschirmfoto 2020-02-07 um 13.39.43.JPG

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

              liv-in-skyL Offline
              liv-in-skyL Offline
              liv-in-sky
              wrote on last edited by
              #40

              @HeinrichB

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

              nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

              1 Reply Last reply
              0
              • liv-in-skyL liv-in-sky

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

                ? Offline
                ? Offline
                A Former User
                wrote on last edited by
                #41

                @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-skyL 1 Reply Last reply
                0
                • ? 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-skyL Offline
                  liv-in-skyL Offline
                  liv-in-sky
                  wrote on last edited by liv-in-sky
                  #42

                  @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

                  nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                  ? 1 Reply Last reply
                  0
                  • liv-in-skyL 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

                    ? Offline
                    ? Offline
                    A Former User
                    wrote on last edited by
                    #43

                    @liv-in-sky

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

                    1 Reply Last reply
                    0
                    • ? A Former User

                      @Glasfaser

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

                      <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>
                      

                      GlasfaserG Offline
                      GlasfaserG Offline
                      Glasfaser
                      wrote on last edited by
                      #44

                      @HeinrichB sagte in Steuerelement in HTML-Tabelle:

                      @Glasfaser

                      Hier meine Tabelle,...….

                      sehr schöne Vorlage und funktioniert gut .

                      Danke :+1:

                      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                      ? 1 Reply Last reply
                      0
                      • GlasfaserG Glasfaser

                        @HeinrichB sagte in Steuerelement in HTML-Tabelle:

                        @Glasfaser

                        Hier meine Tabelle,...….

                        sehr schöne Vorlage und funktioniert gut .

                        Danke :+1:

                        ? Offline
                        ? Offline
                        A Former User
                        wrote on last edited by
                        #45

                        @Glasfaser Freut mich :)

                        1 Reply Last reply
                        0
                        Reply
                        • Reply as topic
                        Log in to reply
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes


                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        582

                        Online

                        32.7k

                        Users

                        82.4k

                        Topics

                        1.3m

                        Posts
                        Community
                        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                        ioBroker Community 2014-2025
                        logo
                        • Login

                        • Don't have an account? Register

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Home
                        • Recent
                        • Tags
                        • Unread 0
                        • Categories
                        • Unreplied
                        • Popular
                        • GitHub
                        • Docu
                        • Hilfe