Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [gelöst] JSON Tabelle farblich formatieren

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.5k

[gelöst] JSON Tabelle farblich formatieren

Geplant Angeheftet Gesperrt Verschoben Visualisierung
18 Beiträge 4 Kommentatoren 1.4k Aufrufe 4 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • BananaJoeB BananaJoe

    @kuddel Verschiedene Farben? Im Prinzip musst du dort genau so eine Style-Anweisung drumherum bauen, nur eben für Links:

    <p>Visit our <a href="https://www.w3docs.com/" style="color: #8ebf42">website</a>.</p>
    

    Ist ein Inline-Beispiel von hier: https://www.w3docs.com/snippets/css/how-to-change-link-colors-in-html.html
    Da im Beispiel steht es zwischen <p> und </p>, sollte mit den <div> ... </div> auch so funktionieren
    Vor deinem </a> fügt doch mal die Style-Anweisung ein.

    K Offline
    K Offline
    Kuddel
    schrieb am zuletzt editiert von
    #8

    @bananajoe vielen Dank für die schneller Antwort.

    Ich habe es jetzt so probiert:

    var_ip_formatted = '<div style="color:#000000;"><a href="http://'+device.IP+'"target=_blank">'+device.IP+'</a>'
    

    Leider bleibt die Schriftfarbe schwarz.

    BananaJoeB 1 Antwort Letzte Antwort
    0
    • K Kuddel

      @bananajoe vielen Dank für die schneller Antwort.

      Ich habe es jetzt so probiert:

      var_ip_formatted = '<div style="color:#000000;"><a href="http://'+device.IP+'"target=_blank">'+device.IP+'</a>'
      

      Leider bleibt die Schriftfarbe schwarz.

      BananaJoeB Offline
      BananaJoeB Offline
      BananaJoe
      Most Active
      schrieb am zuletzt editiert von
      #9

      @kuddel da gibt es kein </div> und gemäß meines Beispiels probiere mal

      var_ip_formatted = '<a href="http://'+device.IP+'"target=_blank" style="color: #000000">'+device.IP+'</a>'
      

      ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

      K 1 Antwort Letzte Antwort
      0
      • BananaJoeB BananaJoe

        @kuddel da gibt es kein </div> und gemäß meines Beispiels probiere mal

        var_ip_formatted = '<a href="http://'+device.IP+'"target=_blank" style="color: #000000">'+device.IP+'</a>'
        
        K Offline
        K Offline
        Kuddel
        schrieb am zuletzt editiert von
        #10

        @bananajoe

        e08d8508-2f43-4027-a94e-5fbbd74f747d-grafik.png

        BananaJoeB 1 Antwort Letzte Antwort
        0
        • JohGreJ Offline
          JohGreJ Offline
          JohGre
          schrieb am zuletzt editiert von
          #11

          Hi, da muss ich mich jetzt mal auch kurz einklinken.
          Ich habe eine Tabelle mit Informationen zu Stromverbrauch -verkauf und errechneter Preis in einer JSON Tabelle.
          9286cf91-5a96-466a-91df-eb4e5e488daf-image.png
          Wie schaffe ich es nun eine gesamte Zeile anders einzufärben. Ich möchte einfach schnell erkennen wo ich mich zeitlich gerade befinde.

          nuc i5: RaspberryMatic, ioBroker, pi-hole, SQL-Server, OMV-NAS, Influx-DB & Grafana, OpenHab, tasmoadmin

          BananaJoeB 1 Antwort Letzte Antwort
          0
          • K Kuddel

            @bananajoe

            e08d8508-2f43-4027-a94e-5fbbd74f747d-grafik.png

            BananaJoeB Offline
            BananaJoeB Offline
            BananaJoe
            Most Active
            schrieb am zuletzt editiert von
            #12

            @kuddel Naja, #000000 ist ja auch schwarz ...

            ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

            K 1 Antwort Letzte Antwort
            0
            • JohGreJ JohGre

              Hi, da muss ich mich jetzt mal auch kurz einklinken.
              Ich habe eine Tabelle mit Informationen zu Stromverbrauch -verkauf und errechneter Preis in einer JSON Tabelle.
              9286cf91-5a96-466a-91df-eb4e5e488daf-image.png
              Wie schaffe ich es nun eine gesamte Zeile anders einzufärben. Ich möchte einfach schnell erkennen wo ich mich zeitlich gerade befinde.

              BananaJoeB Offline
              BananaJoeB Offline
              BananaJoe
              Most Active
              schrieb am zuletzt editiert von
              #13

              @johgre Die Lösung die wir in den letzten Post gerade tangieren würde die Textfarbe ändern. Dazu werden vor und nach dem jeweiligen JSON-Wert html-Befehle eingefügt.
              Welches Widget nutzt du denn, vielleicht kann das das ja

              ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

              JohGreJ 1 Antwort Letzte Antwort
              0
              • BananaJoeB BananaJoe

                @kuddel Naja, #000000 ist ja auch schwarz ...

                K Offline
                K Offline
                Kuddel
                schrieb am zuletzt editiert von Kuddel
                #14

                @bananajoe oh man :-D es kann manchmal so einfach sein.

                Mit #ffffff funzt es jetzt natürlich.

                Vielen Dank

                9f210dee-2802-449b-a131-84cb02d23f6b-grafik.png

                1 Antwort Letzte Antwort
                0
                • BananaJoeB BananaJoe

                  @johgre Die Lösung die wir in den letzten Post gerade tangieren würde die Textfarbe ändern. Dazu werden vor und nach dem jeweiligen JSON-Wert html-Befehle eingefügt.
                  Welches Widget nutzt du denn, vielleicht kann das das ja

                  JohGreJ Offline
                  JohGreJ Offline
                  JohGre
                  schrieb am zuletzt editiert von
                  #15

                  @bananajoe eine vis-invento - JSON Tabelle. In den Standardsettings geht halt nur gerade und ungerade Einfärbung aber nicht eine dezidierte Zeile

                  nuc i5: RaspberryMatic, ioBroker, pi-hole, SQL-Server, OMV-NAS, Influx-DB & Grafana, OpenHab, tasmoadmin

                  BananaJoeB 1 Antwort Letzte Antwort
                  0
                  • JohGreJ JohGre

                    @bananajoe eine vis-invento - JSON Tabelle. In den Standardsettings geht halt nur gerade und ungerade Einfärbung aber nicht eine dezidierte Zeile

                    BananaJoeB Offline
                    BananaJoeB Offline
                    BananaJoe
                    Most Active
                    schrieb am zuletzt editiert von
                    #16

                    @johgre sagte in JSON Tabelle farblich formatieren:

                    @bananajoe eine vis-invento - JSON Tabelle. In den Standardsettings geht halt nur gerade und ungerade Einfärbung aber nicht eine dezidierte Zeile

                    Die nutze ich auch, meine Lösung (die ich schon vor längerer zeit erarbeitet hatte) war das mit dem bunten Text.
                    Eventuell die Frage zum Widget stellen im Inventwo Thread, ich meine die gab es auch schon mal.
                    Das Problem ist ja das man die Inventwo-JSON-Tabelle ja auch beliebig neu sortieren kann per Klick, dann würde das ja nicht mehr passen

                    ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

                    1 Antwort Letzte Antwort
                    1
                    • K Kuddel

                      @bananajoe der Tipp mit den \ war es wohl :

                      if(device.Status == 0) {var_status_formatted = '<div style="color:#ff0000;">OFFLINE</div>'}
                      if(device.Status == 1) {var_status_formatted = '<div style="color:#41f316;">ONLINE</div>'}
                      

                      4d5ecd76-06ed-4df2-83ce-3bcaa839827c-grafik.png

                      CodierknechtC Offline
                      CodierknechtC Offline
                      Codierknecht
                      Developer Most Active
                      schrieb am zuletzt editiert von Codierknecht
                      #17

                      @kuddel
                      Wenn man jetzt noch hingeht und das Ganze nicht hart verdrahtet sondern CSS-Klassen verwendet, kann man das an einer zentralen Stelle (im CSS der VIS) gestalten wie man Lust und Laune hat.

                      if(device.Status == 0) {var_status_formatted = '<div class="offline">OFFLINE</div>'}
                      if(device.Status == 1) {var_status_formatted = '<div class="online">ONLINE</div>'}
                      
                      .online {
                          color:#41f316;
                      }
                      .offline {
                          color:#ff0000;
                          font-weight: bold;
                      }
                      

                      Vielleicht sollte man das auch als span deklarieren statt als div. Ist ja eigentlich kein Blockelement sondern nur Text.

                      "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

                      Proxmox 9.1.1 LXC|8 GB|Core i7-6700
                      HmIP|ZigBee|Tasmota|Unifi
                      Zabbix Certified Specialist
                      Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

                      K 1 Antwort Letzte Antwort
                      1
                      • CodierknechtC Codierknecht

                        @kuddel
                        Wenn man jetzt noch hingeht und das Ganze nicht hart verdrahtet sondern CSS-Klassen verwendet, kann man das an einer zentralen Stelle (im CSS der VIS) gestalten wie man Lust und Laune hat.

                        if(device.Status == 0) {var_status_formatted = '<div class="offline">OFFLINE</div>'}
                        if(device.Status == 1) {var_status_formatted = '<div class="online">ONLINE</div>'}
                        
                        .online {
                            color:#41f316;
                        }
                        .offline {
                            color:#ff0000;
                            font-weight: bold;
                        }
                        

                        Vielleicht sollte man das auch als span deklarieren statt als div. Ist ja eigentlich kein Blockelement sondern nur Text.

                        K Offline
                        K Offline
                        Kuddel
                        schrieb am zuletzt editiert von
                        #18

                        @codierknecht das kann man bestimmt machen, nur das übersteigt aktuell mein KnowHow ^^

                        Ich bin froh, dass es jetzt erst einmal so läuft

                        1 Antwort Letzte Antwort
                        0
                        Antworten
                        • In einem neuen Thema antworten
                        Anmelden zum Antworten
                        • Älteste zuerst
                        • Neuste zuerst
                        • Meiste Stimmen


                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        441

                        Online

                        32.7k

                        Benutzer

                        82.4k

                        Themen

                        1.3m

                        Beiträge
                        Community
                        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                        ioBroker Community 2014-2025
                        logo
                        • Anmelden

                        • Du hast noch kein Konto? Registrieren

                        • Anmelden oder registrieren, um zu suchen
                        • Erster Beitrag
                          Letzter Beitrag
                        0
                        • Home
                        • Aktuell
                        • Tags
                        • Ungelesen 0
                        • Kategorien
                        • Unreplied
                        • Beliebt
                        • GitHub
                        • Docu
                        • Hilfe