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. Skripten / Logik
  4. JavaScript
  5. gelöst-suche hilfe bei tabelle mit scroll im tbody

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

gelöst-suche hilfe bei tabelle mit scroll im tbody

Geplant Angeheftet Gesperrt Verschoben JavaScript
javascript
25 Beiträge 2 Kommentatoren 1.9k Aufrufe 2 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.
  • liv-in-skyL Offline
    liv-in-skyL Offline
    liv-in-sky
    schrieb am zuletzt editiert von liv-in-sky
    #1

    hi - ich bräuchte dringend mal hilfe, ich versuche eine tabelle mit einem festen thead und einen scrollbaren tbody - ich bekomm es nicht hin, dass die width von th's und td's gleich sind. sobald die geamtbreite geändert wird, verziehen sich die spalten. die th's "breaken" die die width angabe im weiteren verlauf der tabelle.

    hat da jmd ahnung und lust mir zu helfen - evtl mit anydesk. das ganze hier zu erklären wäre zu viel

    ich frag mal direkt bei den profis an, bei denen ich vermute, die haben da evtl. ahnung: @Scrounger @Glasfaser @OliverIO

    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

    OliverIOO 1 Antwort Letzte Antwort
    0
    • liv-in-skyL liv-in-sky

      hi - ich bräuchte dringend mal hilfe, ich versuche eine tabelle mit einem festen thead und einen scrollbaren tbody - ich bekomm es nicht hin, dass die width von th's und td's gleich sind. sobald die geamtbreite geändert wird, verziehen sich die spalten. die th's "breaken" die die width angabe im weiteren verlauf der tabelle.

      hat da jmd ahnung und lust mir zu helfen - evtl mit anydesk. das ganze hier zu erklären wäre zu viel

      ich frag mal direkt bei den profis an, bei denen ich vermute, die haben da evtl. ahnung: @Scrounger @Glasfaser @OliverIO

      OliverIOO Offline
      OliverIOO Offline
      OliverIO
      schrieb am zuletzt editiert von
      #2

      @liv-in-sky sagte in suche hilfe bei tabelle mit scroll im tbody:

      hi - ich bräuchte dringend mal hilfe, ich versuche eine tabelle mit einem festen thead und einen scrollbaren tbody - ich bekomm es nicht hin, dass die width von th's und td's gleich sind. sobald die geamtbreite geändert wird, verziehen sich die spalten. die th's "breaken" die die width angabe im weiteren verlauf der tabelle.

      hat da jmd ahnung und lust mir zu helfen - evtl mit anydesk. das ganze hier zu erklären wäre zu viel

      ich frag mal direkt bei den profis an, bei denen ich vermute, die haben da evtl. ahnung: @Scrounger @Glasfaser @OliverIO

      zeig doch mal den code

      Meine Adapter und Widgets
      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
      Links im Profil

      liv-in-skyL 1 Antwort Letzte Antwort
      0
      • OliverIOO OliverIO

        @liv-in-sky sagte in suche hilfe bei tabelle mit scroll im tbody:

        hi - ich bräuchte dringend mal hilfe, ich versuche eine tabelle mit einem festen thead und einen scrollbaren tbody - ich bekomm es nicht hin, dass die width von th's und td's gleich sind. sobald die geamtbreite geändert wird, verziehen sich die spalten. die th's "breaken" die die width angabe im weiteren verlauf der tabelle.

        hat da jmd ahnung und lust mir zu helfen - evtl mit anydesk. das ganze hier zu erklären wäre zu viel

        ich frag mal direkt bei den profis an, bei denen ich vermute, die haben da evtl. ahnung: @Scrounger @Glasfaser @OliverIO

        zeig doch mal den code

        liv-in-skyL Offline
        liv-in-skyL Offline
        liv-in-sky
        schrieb am zuletzt editiert von
        #3

        @oliverio

        mach ich gern - aber ob das alles erkennbar wird

        es gibt darin einen css block - der macht probleme - zeile 116

        wenn du shelly- adapter hast, könntest du das script sogar laufen lassen und in der vis ansehen

         //@liv-in-sky 2021  5.3.-10:11
        
        // DAS WIDGET IN DER VIS
        // das Standard html-Widget wird genutzt in der VIS - dazu den DP javascript.x.Tabellen@Liv.TestTabelleVIS.HTMLTableVis als binding angeben d.h.
        // im html-teil des widgets wird dier daten punkt in geschweiften klammern angegeben z.B. {javascript.0.Tabellen@Liv.TestTabelleVIS.HTMLTableVis}
        
        // @ts-ignore
        let braucheEinVISWidget=true;                          // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
        let  dpVIS="ShellyTabelleVIS"                            // WICHTIG wenn braucheEinVISWidget auf true gesetzt !!  Ist der Name zum datenpunkt anlegen
        let braucheEinJSON=false;                               // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
        let  dpJSON="ShellyTabelleJSON"                          // WICHTIG wenn braucheEinJSON auf true gesetzt !!   Ist der Name zum datenpunkt anlegen
        let mySchedule="  */15 * * * * ";                         // jede minute  
        
        //ZUSÄTZLICH VARIABLEN
        
        let sortierenEIN=true;
        let farbeInaktiverShelly="#5590CA"
        let welcheSortierung=2;          // je nach spalte von 0 bis 6
        let geteiteVersionsAnzeige=false; // version in spalte 7 wird 2-zeilig
        const schalterUmrahmung="0"                              //wenn überschriften buttons sind , den rahmen mit 0 wegmachen 
        
        //---------------------------------------
        
        //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3 - es MÜSSEN in allen Arrays die GLEICHE Anzahl für die Werte sein
        let val=             ["dummy1","dummy2","dummy3","dummy4","dummy5","dummy6","dummy7"];             // GLEICHE ANZAHL !! HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WERDEN -  jeder val[x] muss unten in der schleife gesetzt werden !!
        let Feld1lAlign=     ["left","center","center","center","center","left","left"];                     // GLEICHE ANZAHL !! AUSRICHTUNG IN DER SPALTE
        let htmlSpalte1Weite=["210","110","95","120","65","150","5"];                             // GLEICHE ANZAHL !! BREITE DER SPALTE, wenn nicht auto
        let htmlFeld=        ["NAME","IP","ONLINE","UPTIME","RSSI","ID","VERSION"];                        // GLEICHE ANZAHL !! NAME/ÜBERSCHRIFT DER SPALTE
        let schalterInSpaltenUeberschrift=[true,true,true,true,true,true,true];                            // WENN BUTTONS INSTALLIERT WERDEN - sonst false
        let symbolSchalter=              ["na","✓","✗"];   // SYMBOLE DER BUTTONS - standardmäßig sind die spaltennamen (htmlFeld) genutzt - werden im standard nicht genutzt
        //-----------------------------------
        
        //Symbole für Tabelle z.b.: ⚪  ⚫ ⭕  🔴 🔵 ⏱ 💀 👍 👎 📑 💲 👀 🔹 ✅ ❌ ⚠️ mehr: https://emojiterra.com/de/ oder https://unicode-table.com/de/html-entities/
        
        //hier werden die styles für die tabelle definiert
        //ÜBERSCHRIFT ÜBER TABELLE
        const htmlUberschrift=true;                             // mit Überschrift über der tabelle
        const htmlSignature=false;                               // anstatt der Überscghrift eine signature: - kleiner - anliegend
        const htmlFeldUeber='Shelly Übersicht';                // für Überschrift und Signature falls htmlUberschrift und htmlSignature ist true
        const htmlFarbUber="white";                              // Farbe der Überschrift
        const htmlSchriftWeite="normal";                         // bold, normal - Fettschrift für Überschrift
        const htmlUEberFontGroesse="18px";                       // schriftgröße überschrift
        //SEITENLEISTE
        const ichWillSeitenLeiste=false;                          // links einblenden einer Seitenleiste
        const nameSeitenLeiste="SHELLY"
        const breiteSeitenleiste=25;
        const schriftGroesseSeitenleiste=18;
        const abstandSeitentextVonOben=6;
        const htmlFarbSeiteSchrift="white";
        const htmlBackgroundFarbeSeitenliste="transparent";
        //MEHRERE TABELLEN NEBENEINANDER
        let mehrfachTabelle=1;                                   // bis zu 3 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3 !!!
        const trennungsLinie=1;                                // extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
        const farbetrennungsLinie="#5590CA";                     // bei mehreren Tabellen nebeneinander wird ein Strich zw. den Tabellen gezogen
        const htmlFarbTableColorUber="white"                     // Spalten-Überschrift in der tabelle - für die einzelnen Spalten //"#BDBDBD"; 
        const htmlFarbZweiteTabelle="white";                     // Farbe der Spalten-Überschrift bei jeder 2.ten Tabelle        
        //ÜBERSCHRIFT SPALTEN - OBERSTE ZEILE IN TAB
        const UeberSchriftHoehe=40;                            // Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
        const LinieUnterUeberschrift="1";                        // Liniehoehe nur unter Spaltenüberschrift  
        const farbeLinieUnterUeberschrift="blue";               // LinienFarbe unter Spaltenüberschrift
        const groesseUeberschrift=16; 
        const UeberschriftStyle="normal"                         // möglich "bold"
        const UeberschriftSpalten=true;                          // ein- oder ausblenden der spatlen-überschriften
        //GANZE TABELLE
        const abstandZelle="4";                                  // legt den abstand in den zellen zum rahmen fest
        const zeilenAbstand=5;                                   // legt den abstand zwischen den zeilen fest
        const farbeUngeradeZeilen="#000000";                     // Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 - bei "transparent" gewinnt htmlFarbTableColorGradient1
        const farbeGeradeZeilen="#151515";                       // Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2   - bei "transparent" gewinnt htmlFarbTableColorGradient2
                                         // Weite der Tabelle - verhindert das dynamische breiter werden, wenn werte unterschiedliche werte haben
        const zentriert=true;                                    // ganze tabelle zentriert im html Widget - muss in pixel angegeben werden oder "auto"
        const backgroundAll="#000000";                           // Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
        const htmlSchriftart="Ubuntu-Regular"                    // "Jura-DemiBold"   //"RobotoCondensed-Bold"   //"Helvetica"; .....
        const htmlSchriftgroesse="16px";                         // schriftgröße in den zellen
        const rahmenBreite="1px";                                //mit 0 ist äußerer rahmen weg
        //FELDER UND RAHMEN
        const htmlFarbFelderschrift="#CBCBCA";                   // SchriftFarbe der Felder
        const htmlFarbFelderschrift2="#CBCBCA";                  // SchriftFarbe der Felder für jede 2te Tabelle
        const htmlGragient=[150,15,50];                          // einstellung des gradienten
        const htmlFarbTableColorGradient1="blue";         // Gradient - Hintergrund der Tabelle - Verlauffarbe
        const htmlFarbTableColorGradient2="#5590CA";              // Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
        const htmlFarbTableBorderColor="grey";                   // Farbe des Rahmen - ist dieser gleich den gradienten, sind die rahmen unsichtbar
        let htmlRahmenLinien="cols";                             // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
        
        // falls eine extra html datei gebraucht wird
        const path = "/htmlexample.html";                        //FIlenamen definieren
        const home ='vis.0'                                      //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta)
        let   braucheEinFile=false;                              // bei true wird ein file geschrieben
        
        // AB HIER NICHTS  ÄNDERN -------------------------------------------------------------------------------------------------
        // AB HIER NICHTS  ÄNDERN -------------------------------------------------------------------------------------------------
        // AB HIER NICHTS  ÄNDERN ---------------------------------erst wieder ab Zeile 134----------------------------------------
        
        let borderHelpBottum;
        let borderHelpRight;
        let htmlcenterHelp;
        let htmlcenterHelp2;
        
        if(String(htmlRahmenLinien)=="rows") {borderHelpBottum=1;borderHelpRight=0;}
        if(String(htmlRahmenLinien)=="cols") {borderHelpBottum=0;borderHelpRight=1;}
        if(String(htmlRahmenLinien)=="none") {borderHelpBottum=0;borderHelpRight=0;}
        if(String(htmlRahmenLinien)=="all")  {borderHelpBottum=1;borderHelpRight=1;}
        zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
        zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
        let weite="1045"; //px   
        let last
        let adad=0
        {for (let i=0;i<htmlSpalte1Weite.length;i++){
                         adad=adad+Number(htmlSpalte1Weite[i].replace("px","")) ;log(" ### "+adad.toString())} 
                             //last= Number(weite) -adad  ; log(last.toString())          
                             }  
        
        let hoeheTabelle=400;
        let hoeheTabelle2=hoeheTabelle-UeberSchriftHoehe-trennungsLinie
        let hoeheTabelleKorrigiert=hoeheTabelle+22                                               //border-spacing:"+abstandZelle+"px; padding:"+zeilenAbstand+"px; 
        let scrollbalken=6
        const htmlZentriert=   "<style>"+                     //position: fixed;margin-top: 40px;
                    /*thead*/         " .fixedHeader {    table-layout: fixed; width: "+weite+"px;   height: "+UeberSchriftHoehe+"px; border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+"; }"+ //
                   /*tbody */         " .scrollContent { display: block;  width:"+(Number(weite)-0)+"px; height: "+hoeheTabelle+"px;  overflow-y: scroll;   }"+ // height: "+hoeheTabelle2+"px; 
                   /*div*/            " .tableContainer { background-color: #8E898A; overflow:hidden;  }"+  //
                   /*table*/          " .tablezusatz { table-layout: fixed;  border:"+rahmenBreite+";  "+  //height: "+hoeheTabelle+"px; 
                                                     "width: "+weite+"px; color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+";"+
                                                     "font-family:"+htmlSchriftart+"; background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+htmlGragient[2]+"%); }"+
                                      " .mythclass0 { width:"+(Number(htmlSpalte1Weite[0])+0)+"px; border-spacing: 0px; padding: 0px; }"+  //text-align:"+Feld1lAlign[0]+"
                                      " .mythclass1 { width:"+(Number(htmlSpalte1Weite[1])-0)+"px;  }"+
                                      " .mythclass2 { width:"+(Number(htmlSpalte1Weite[2])-0)+"px;  }"+
                                      " .mythclass3 { width:"+(Number(htmlSpalte1Weite[3])+0)+"px; }"+
                                      " .mythclass4 { width:"+(Number(htmlSpalte1Weite[4])-0)+"px;  }"+
                                      " .mythclass5 { width:"+(Number(htmlSpalte1Weite[5])-0)+"px; }"+
                                //      " .mythclass6 { width:px100%  }"+ //px100\% " +htmlSpalte1Weite[6]+"px
        
                                      " .myclasstr_uber_spalte { font-family:"+htmlSchriftart+"\; height:"+UeberSchriftHoehe+"px; color:"+htmlFarbTableColorUber+"; "+  //  border-spacing:"+abstandZelle+"px;
                                                                "font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+"; border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+"}"+
                                      " .myclassueber_spalte_button     {color:"+htmlFarbTableColorUber+"}"+
                                      " .myclassueber_spalte_ohne_button{color:"+htmlFarbTableColorUber+"}"+
        
                                      " .myclasstr_gerade{background-color:"+farbeGeradeZeilen+" ; padding: 0px;}"+  //border-spacing:"+abstandZelle+"px; 
                                      " .myclasstr_ungerade{ background-color:"+farbeUngeradeZeilen+" ; padding: 0px;}"+ //border-spacing:"+abstandZelle+"px;
                                      " .myclasstd_normal{}"+
                                      " .myclasstd_trennungslinie{}"+
                                      " .thescroller::-webkit-scrollbar {width: 0px; }"+
                                      "</style>"+'<center>'
        
        
        const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html;  http-equiv=\"refresh\" content=\"30\"; charset=utf-8\">"+
                           "<style> * {  margin: 0;} body {background-color: "+backgroundAll+"; margin: 0 auto;  }"+
                           " p {padding-top: 10px; padding-bottom: 10px; text-align: "+htmlcenterHelp2+"}"+
                          // " div { margin: 0 auto;  margin-left: auto; margin-right: auto;}"+
                           " td { padding:"+abstandZelle+"px; border:0px solid "+htmlFarbTableBorderColor+";  border-right:"+borderHelpRight+"px solid "+htmlFarbTableBorderColor+";border-bottom:"+borderHelpBottum+"px solid "+htmlFarbTableBorderColor+";}"+ 
                           " table { width: "+weite+";  margin: 0 "+htmlcenterHelp+"; border:1px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                           "td:nth-child(1) {width: "+htmlSpalte1Weite[0]+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite[1]+"}"+
                           " </style></head><body> <div>";
        //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
        
        const htmlTabStyle= "<div class=\"tableContainer\" >"+
                           "<table class=\"tablezusatz\" rules=\""+htmlRahmenLinien+"\">"+
                           "<thead class=\"fixedHeader\">";
                         //  "<table class=\"tablezusatz\" bordercolor=\""+htmlFarbTableBorderColor+"\" border=\""+rahmenBreite+"\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+zeilenAbstand+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                         //     "; font-family:"+htmlSchriftart+";background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+htmlGragient[2]+"%);\"><thead class=\"fixedHeader\">";
        
        let htmlTabUeber4="<tr class=\"myclasstr_uber_spalte\">";
        //let htmlTabUeber4="<tr cellspacing=\""+abstandZelle+"\" font-family:\""+htmlSchriftart+"\"  height:"+UeberSchriftHoehe+"px; color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
        const htmlTabUeber3="</tr></thead><tbody class=\"scrollContent thescroller\"> ";
        
        
        const buttonScript =   '<script> function setOnOtherValue(myval) {	var Self = this;	Self.servConn.getStates(myval, (error, states) => {  console.log(states); self.servConn.setState(myval, !states[myval].val);}  )}; '
                             +'$( "button" ).click(function() {  $( this ).slideUp() });'
                             +'</script>'
        
        
        //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3
        let htmlTabUeber2=""
        for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { if (!schalterInSpaltenUeberschrift[ue] ) { 
                                                              htmlTabUeber2=htmlTabUeber2.concat("<th class=\"mythclass"+ue+" myclassueber_spalte_ohne_button\" >"+htmlFeld[ue]+"</th>")}           /*style=\"width:"+htmlSpalte1Weite[0]+";\"*/
                                                              else {let valButton="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+ue
                                                             htmlTabUeber2=htmlTabUeber2.concat("<th class=\"mythclass"+ue+" myclassueber_spalte_button\"  >"+"<button id=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundFarbeSeitenliste+"\; color: "+htmlFarbTableColorUber+"; font-family:"+htmlSchriftart+"; font-size:1em; text-align:left value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"+htmlFeld[ue]+"</button></th>")}  //symbolSchalter[ue] 
                                                              }
        /*
        for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { if (!schalterInSpaltenUeberschrift[ue] ) { 
                                                              htmlTabUeber2=htmlTabUeber2.concat("<th class=\"mythclass"+ue+"\" align="+Feld1lAlign[ue]+" style=\"color:"+htmlFarbTableColorUber+"\">"+htmlFeld[ue]+"</th>")} 
                                                              else {let valButton="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+ue
                                                             htmlTabUeber2=htmlTabUeber2.concat("<th class=\"mythclass"+ue+"\" align="+Feld1lAlign[ue]+">"+""+"<button id=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundFarbeSeitenliste+"\; color: "+htmlFarbTableColorUber+"; font-family:"+htmlSchriftart+" font\-size\:1em\; text\-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"+htmlFeld[ue]+"</button></th>")}  //symbolSchalter[ue] 
                                                              }
                                                              */
        
        htmlTabUeber2=htmlTabUeber2
        
        let  htmlTabUeber2_1=""
        for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { htmlTabUeber2_1=htmlTabUeber2_1.concat("<td width="+htmlSpalte1Weite[ue]+" align="+Feld1lAlign[ue]+" style=\"color:"+htmlFarbZweiteTabelle+"\">"+htmlFeld[ue]+"</td>")}
        
        //------------------------------------------------------
        if ( !(val.length == Feld1lAlign.length && htmlSpalte1Weite.length == htmlFeld.length && val.length == htmlFeld.length) || (mehrfachTabelle<1 || mehrfachTabelle>3) ) 
             { log("Anzahle der Definitions Arrays sind ungleich ODER mehrfachTabelle ist falsch - Script wurde gestoppt !!!","error");
                 // @ts-ignore
                 stopScript();}
        
        let langeGesamt=0; 
        let htmlTabUeber="";
        let htmlOut="";
        let mix;
        let counter;
        let makeJsonWidget;
        let myObject=[];
        
        let mitAlphabet=false;
        
        needDP();
        
        function writeHTML(){
        let seitenLeistenTest="";
        let htmlTabUeber1=htmlTabUeber4
        myObject=[]
        let helperLeerzeile=""
        let makeJsonWidget=[];
        htmlOut="";
        counter=-1;
        
        //--------------------------------------------------------------------------------------------------------------------------------------------------
        //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
        //---------alle val[x] werte müssen von euch bestimmt werden - val[0],val[1],val[2] !!!-------------------------------------------------------------
        //--------------------------------------------------------------------------------------------------------------------------------------------------
        
        let valueuptime
        
        $('shelly.*.*.name').each(function(id, i) {           // hier eigene schleife definieren und den wert counter++ nicht vergessen  !!!
             
        
        
                  var ida = id.split('.');
             
               //   if(existsState(id) && existsState(id.replace("alive","uptime"))) {
        
                  getState(id).val!=null &&  getState(id).val!="" && getState(id).val!=undefined ?val[0]=getState(id).val : val[0]=" --- ";
                 
                 if (existsState(id.replace("name","hostname"))) val[1]=getState(id.replace("name","hostname")).val;
                 if (existsState(id.replace("name","online"))) val[2]=getState(id.replace("name","online")).val;
                 if (existsState(id.replace("name","uptime"))) val[3]=getState(id.replace("name","uptime")).val;
                 valueuptime=(Number(val[3].replace(/.*?([0-9][0-9]?)\:.*/,"$1"))*60*60)+
                                  (Number(val[3].replace(/.*?[0-9][0-9]?\:([0-9][0-9]?)\:.*/,"$1"))*60)+
                                  (Number(val[3].replace(/.*?[0-9][0-9]?\:[0-9][0-9]?\:([0-9][0-9]?).*/,"$1")))
                               //   log(typeof val[3].replace(/^(.+)D.+/,"$1"))
                                  if( !val[3].replace(/^(.+)D.+/,"$1").includes(":")) valueuptime=valueuptime+Number(val[3].replace(/^(.+)D.+/,"$1"))*24*60*60
                                 // log(valueuptime.toString()+"  ----" +val[3].replace(/^(.+)D.+/,"$1"))
        
                 if (existsState(id.replace("name","rssi"))) val[4]=getState(id.replace("name","rssi")).val;
                 if (existsState(id.replace("name","id"))) val[5]=getState(id.replace("name","id")).val;
        
                 if (existsState(id.replace("name","version"))) val[6]=getState(id.replace("name","version")).val;                   
             
        
                myObject.push({                "value0" : val[0],            //  "INSTANCE"
                                               "value1" : val[1],            //  "SINCE"
                                               "value2" : val[2],            //  "STATUS"
                                               "value3" : val[3],            //  "INSTANCE"
                                               "value4" : val[4],            //  "SINCE"
                                               "value5" : val[5],
                                               "value6":  val[6],
                                               "valueuptime": valueuptime
                                                  //   ID
                                                               })
                       
                  makeJsonWidget.push({        [htmlFeld[0]] : val[0],  //  "INSTANCE"
                                               [htmlFeld[1]] : val[1],  //  "SINCE"
                                               [htmlFeld[2]] : val[2],   //  "STATUS"
                                               "vallly"      : getState(id).val
                                                               })  
                
                  
                 
                                                         // diese function muss als letztes in der eigenen schleife aufgerufen werden
           });                                            // Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
        
          // Sortierungen---------------------------------------------------------
          //welcheSortierung=3
          
         
          if( sortierenEIN && (welcheSortierung==3 || welcheSortierung==4 || welcheSortierung==1)    ) {
                     if(welcheSortierung==3) myObject.sort(function (alpha, beta) { return  Number(beta["value4"]) -Number(alpha["value4"]);   }); 
                     if(welcheSortierung==4) myObject.sort(function (alpha, beta) { /*log(beta.valueuptime+" --" +alpha.valueuptime);*/ return  beta.valueuptime -alpha.valueuptime;   });
                     if(welcheSortierung==1)   myObject.sort( function( a, b )   {
                                                 	a = a["value1"].split( '.' );
                                                 	b = b["value1"].split( '.' );
                                               	for( var i = 0; i < a.length; i++ )	{
           	                                 	if( ( a[i] = parseInt( a[i] ) ) < ( b[i] = parseInt( b[i] ) ) )
           	                         		return -1;	else if( a[i] > b[i] )
           	                            	return 1;}  	return 0;} );                                      
        
                     } else {
            switch (welcheSortierung) {
               case 0: sortMe("alpha","value0");break;  
               case 1: break;
               case 2: sortMe("bool","value2");break;  
               case 3: break;  
               case 4: break;  
               case 5: sortMe("alpha","value5");break; 
               case 6: sortMe("alpha","value6");break;
            }   }
        
           for(let zz=0;zz<myObject.length;zz++){
        
         // Unterüberschften ------------------------------------------------------       
                if (mitAlphabet){
                  if( myObject[zz].value0[0]!=helperLeerzeile){ tabelleAusbessern();
                                                                counter=-1;  for(let ic=0;ic<mehrfachTabelle;ic++ ) { for (let tt=0 ;tt<val.length;tt++) 
                                                                                                                          { tt==0 && ic==0 ? val[tt]=(myObject[zz].value0[0]).toUpperCase() : val[tt]="&ensp;"
                                                                                                                          }   
                                                                                                                      counter++;tabelleBind();langeGesamt++; }
                  helperLeerzeile=myObject[zz].value0[0] } ; sortierenEIN=false;}
        
         // Zuteilung der Tabellenspalten-------------------------------------------
        
            val[0]=myObject[zz].value0;
            val[1]=myObject[zz].value1;
            val[2]=myObject[zz].value2;
            let regH=myObject[zz].value3.trim().replace(/^(.+)[C-E].+?$/,"$1 d")
            if(regH.includes(":")) regH="";
            //log(myObject[zz].value3.replace(reg,"$1 d"))
            geteiteVersionsAnzeige ? val[3]=( (myObject[zz].value3.replace(/.+D(.+)/,"$1"))+"</br>"+regH)  :  val[3]=myObject[zz].value3.replace(/(.+D)(.*)/,"$2 +$1");
            val[4]=myObject[zz].value4+" dB";
            val[5]=myObject[zz].value5;
            geteiteVersionsAnzeige ? val[6]=myObject[zz].value6.replace(/^(.+?)\/(.+)/,"$1</br>$2")  : val[6]=myObject[zz].value6;  
            
            
           if (!myObject[zz].value2) {val[2]=symbolSchalter[2]}
            if (myObject[zz].value2)  {val[2]=symbolSchalter[1]}
           //  if(getState("javascript." + instance +".Tabellen@Liv."+dpVIS+".Spalte2").val) { val[2]=myObject[zz].value2} 
            if (!myObject[zz].value2) {     val[0]="<font color=\""+farbeInaktiverShelly +"\">"+val[0]+"</font>";
                                           val[1]="<font color=\""+farbeInaktiverShelly +"\">"+val[1]+"</font>";
                                           val[2]="<font color=\""+farbeInaktiverShelly +"\">"+val[2]+"</font>";
                                           val[3]="<font color=\""+farbeInaktiverShelly +"\">"+val[3]+"</font>";
                                           val[4]="<font color=\""+farbeInaktiverShelly +"\">"+val[4]+"</font>";
                                           val[5]="<font color=\""+farbeInaktiverShelly +"\">"+val[5]+"</font>";
                                           val[6]="<font color=\""+farbeInaktiverShelly +"\">"+val[6]+"</font>";
        
                                      }  
             counter++;                                       // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
             tabelleBind();                                   // HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  
             langeGesamt++;                                   // WICHTIG Seitenleiste
           }
        
        //-------------------------------------------------------------------------------------------------------------------------------------------------
        //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
        //-------------------------------------------------------------------------------------------------------------------------------------------------
        
        // Seitenleiste------------------------------------------------------------   
          let einmalAbstand=`</br>
        `
         for (let f=0;f<abstandSeitentextVonOben;f++){
             seitenLeistenTest=seitenLeistenTest+`<br>
        `}
         for (let i=0;i<nameSeitenLeiste.length;i++){
             seitenLeistenTest=seitenLeistenTest+nameSeitenLeiste[i]+`</br>
        ` }
         htmlTabUeber="";
         if (ichWillSeitenLeiste) htmlTabUeber1=htmlTabUeber1+"<td  style=\" background-color: "+htmlBackgroundFarbeSeitenliste+"; margin-top: 200px; color: "+htmlFarbSeiteSchrift+ ";font-size:"+schriftGroesseSeitenleiste+"px; vertical-align:top; text-align:center \" width=\""+breiteSeitenleiste+"\" rowspan=\""+(langeGesamt+1)+"\">"+seitenLeistenTest+"</td>"
         switch (mehrfachTabelle) { 
           case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
           case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
           case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2_1+htmlTabUeber3; break;
           case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
          };   
          if (!UeberschriftSpalten) {htmlTabUeber=""}
        
              tabelleFinish(); 
              if (braucheEinJSON ) {setStateDelayed("javascript." + instance + ".Tabellen@Liv."+dpVIS+".JSONVis",JSON.stringify(makeJsonWidget),1000 )}
             
        } // function ende
        
        //MAIN:
         
        schedule(mySchedule,  function () { 
         writeHTML();
         if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
        }); 
        setTimeout(function () {writeHTML();  }, 2050);                                 
        
         function tabelleBind(){
          
           switch (mehrfachTabelle) { 
        
           case 1: if(counter%2==0)   {htmlOut=htmlOut+"<tr class=\"myclasstr_gerade\">";
                                       for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td style=\"width:"+htmlSpalte1Weite[u]+"px\" align="+Feld1lAlign[u]+">"+val[u]+"</td>"); // style=\"width:"+htmlSpalte1Weite[u]+"\" 
                                                                    }  htmlOut=htmlOut.concat("</tr>");   break;
        
                                       } else   {htmlOut=htmlOut+"<tr class=\"myclasstr_ungerade\">";
                                                 for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td style=\"width:"+htmlSpalte1Weite[u]+"px\" align="+Feld1lAlign[u]+">"+val[u]+"</td>"); //style=\"width:"+htmlSpalte1Weite[u]+"\" 
                                                                              }  htmlOut=htmlOut.concat("</tr>");   break;
                                       }
           
           case 2: if(counter%4==0){  if(counter%2==0)  {htmlOut = htmlOut+"<tr class=\"myclasstr_gerade\">";
                                                         for(let u=0;u<val.length;u++){ if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");} else
                                                                                      {htmlOut=htmlOut.concat("<td style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld1lAlign[u]+">"+val[u]+"</td>")}
                                                                                      }  
                                                                                   
                                        } else { for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");
                                                                              }  htmlOut=htmlOut.concat("</tr>");  } break;
                                   } else {
                                     if(counter%2==0)  {htmlOut=htmlOut+"<tr class=\"myclasstr_ungerade\">";
                                                        for(let u=0;u<val.length;u++){  if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");} else
                                                                                     {htmlOut=htmlOut.concat("<td style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld1lAlign[u]+">"+val[u]+"</td>")}
                                                                                     }  
                                        } else {        for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");
                                                                                     }  htmlOut=htmlOut.concat("</tr>");  }  break;}
        
           case 3: if(counter%2==0)  {  if(counter%3==0 ) {htmlOut = htmlOut+"<tr class=\"myclasstr_gerade\">";
                                                           for(let u=0;u<val.length;u++){if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");} else
                                                                                        {htmlOut=htmlOut.concat("<td style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld1lAlign[u]+">"+val[u]+"</td>")}
                                                                                                                }  
                                       } else { if(counter%3==1)  {for(let u=0;u<val.length;u++){  if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");} else
                                                                                                                      {htmlOut=htmlOut.concat("<td  align="+Feld1lAlign[u]+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ "; color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>")}
                                                                                                                }  
                                                                  } else  { for(let u=0;u<val.length;u++){  htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");
                                                                                                         }  htmlOut=htmlOut.concat("</tr>");  } }  break;
                                     } 
                                     else {
                                        if(counter%3==0 )  {htmlOut = htmlOut+"<tr class=\"myclasstr_ungerade\">";
                                                           for(let u=0;u<val.length;u++){ if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");} else
                                                                                                             {htmlOut=htmlOut.concat("<td style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld1lAlign[u]+">"+val[u]+"</td>")}
                                                                                                                }  
                                                                                                                
                                     } else{ if(counter%3==1 )  { for(let u=0;u<val.length;u++){ if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");} else
                                                                                                                    {htmlOut=htmlOut.concat("<td  align="+Feld1lAlign[u]+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ "; color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>")}
                                                                                                                }  
                                                                 } else {        for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");
                                                                                                              }  htmlOut=htmlOut.concat("</tr>"); } } break;
                                     }                                        
        
        
                                        
                } //switch ende
        
        }
        
         function tabelleAusbessern() {         // bessert mei mehrfachtabellen die nicht vollen zeilenn aus - bevor die unterüberschriften kommen
        
        switch (mehrfachTabelle) {
                
               case 1:    break;
               case 2:    let helpMehrfach="</td>";
                          for(let w=0;w<val.length;w++){helpMehrfach=helpMehrfach.concat("<td>&ensp;</td>")};helpMehrfach=helpMehrfach.concat("</tr>")
                          if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach);
                          break;
               case 3:   let helpMehrfach2="</td>";
                         for(let w=0;w<val.length;w++){helpMehrfach2=helpMehrfach2.concat("<td>&ensp;</td>")};helpMehrfach2=helpMehrfach2.concat("</tr>")
                         if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                         if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach2);
                         let helpMehrfach3="</td>";
                         let helpMehrfach31="";for(let w=0;w<val.length;w++){helpMehrfach31=helpMehrfach31.concat("<td>&ensp;</td>")}
                         for(let w=0;w<val.length;w++){if(w<val.length-1) {helpMehrfach3=helpMehrfach3.concat("<td>&ensp;</td>")} else
                                                                 {helpMehrfach3=helpMehrfach3.concat("<td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td>"+helpMehrfach31)}
                                                           };helpMehrfach3=helpMehrfach3.concat("</tr>")        
                         if(counter%3==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach3);  break; }}
        
         function tabelleFinish() {
        
        switch (mehrfachTabelle) {
                
               case 1:    break;
               case 2:    let helpMehrfach="</td>";
                          for(let w=0;w<val.length;w++){helpMehrfach=helpMehrfach.concat("<td>&ensp;</td>")};helpMehrfach=helpMehrfach.concat("</tr>")
                          if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach);
                          break;
               case 3:   let helpMehrfach2="</td>";
                         for(let w=0;w<val.length;w++){helpMehrfach2=helpMehrfach2.concat("<td>&ensp;</td>")};helpMehrfach2=helpMehrfach2.concat("</tr>")
                         if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                         if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach2);
                         let helpMehrfach3="</td>";
                         let helpMehrfach31="";for(let w=0;w<val.length;w++){helpMehrfach31=helpMehrfach31.concat("<td>&ensp;</td>")}
                         for(let w=0;w<val.length;w++){if(w<val.length-1) {helpMehrfach3=helpMehrfach3.concat("<td>&ensp;</td>")} else
                                                                 {helpMehrfach3=helpMehrfach3.concat("<td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td>"+helpMehrfach31)}
                                                           };helpMehrfach3=helpMehrfach3.concat("</tr>")        
                         if(counter%3==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach3);  break; }
             
                 var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlUEberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((new Date().getTime())), 'SS:mm:ss')+"</p>"; 
            
                var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: center;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((new Date().getTime())), "SS:mm:ss");+"</div>";
                
                if (!htmlSignature) htmlUnter="";
                     var htmlOutVIS="";
                     if (htmlUberschrift) 
                        { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div>"+htmlUnter+ buttonScript ;
                    } else {
                       zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div>"+htmlUnter+ buttonScript :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div>"+htmlUnter+ buttonScript;
                    }
                        
        
          // log("bin raus aus tabelleBind");
                   if (braucheEinVISWidget)  setStateDelayed("javascript." + instance + ".Tabellen@Liv."+dpVIS+".HTMLTableVis", htmlOutVIS ,1000);
        
         var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((new Date().getTime())), "SS:mm:ss");+"</div>"
        
         if (!htmlSignature) htmlUnter="";
          var htmlEnd="</table>"+htmlUnter+"</div></body>";
         //mit oder ohne überschrift - zentriert oder links
        htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
         //log(htmlOut);
        
        
        }
        
        async function needDP(){
           for(let s=0;s<schalterInSpaltenUeberschrift.length;s++){ if(schalterInSpaltenUeberschrift[s]){
           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+s))) {
               await createStateAsync("Tabellen@Liv."+dpVIS+".Spalte"+s, false,{type: "boolean", name: "Schalter_Spalte"+s, role: "value", read: true, write: true, } ); } 
             }}
        
           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".HTMLTableVis"))) {
               await createStateAsync("Tabellen@Liv."+dpVIS+".HTMLTableVis", "empty",{type: "string", name: "HTML_Standard_Widget_mit_Binding", role: "value", read: true, write: true, } ); } 
            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".JSONVis"))) {
               await createStateAsync("Tabellen@Liv."+dpVIS+".JSONVis", "",{type: "string", name: "JSON Format", role: "value", read: true, write: true, } ); }   
           
        
        
        
        }
          setTimeout(function () { 
        
           let arrTriggerSchalter=[]
           $("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte*").each(function(id, i) {  
                  arrTriggerSchalter.push(id) 
           });
         //  log(arrTriggerSchalter.toString())
           on({id: arrTriggerSchalter, ack: false, change: "any"}, function (obj) { 
             //  log(obj.id)
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte0") welcheSortierung=0;
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte1" )  welcheSortierung=1 ;
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte2" )  welcheSortierung=2; 
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte4")  welcheSortierung=3;
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte3" )  welcheSortierung=4;
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte5") welcheSortierung=5;
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte6" )  welcheSortierung=6; 
             
           //  log(String(mehrfachTabelle))
          setTimeout(function () {  
               writeHTML();
               if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
        }, 900);
            
        
             
           });}, 5050);
        
        
        //SORTIEREN
        function sortMe(myType,value){
        
        if(myType=="alpha" ){ myObject.sort(function (alpha, beta) {
                    if ((alpha[value].toString().toUpperCase()).trim() > (beta[value].toString().toUpperCase()).trim())
                       return 1;
                    if ((beta[value].toString().toUpperCase()).trim()> (alpha[value].toUpperCase().toString()).trim())
                       return -1;
                    return 0;
                   });}
        if(myType=="bool" ) {
             
          myObject .sort(function(x, y) { return x[value] - y[value] }); }       
        
        
          if(myType=="num" )   { myObject.sort(function (alpha, beta) {
                             return  beta[value] -alpha[value];   });}
        
        }
        
        
        
        
        

        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

        OliverIOO 1 Antwort Letzte Antwort
        0
        • liv-in-skyL liv-in-sky

          @oliverio

          mach ich gern - aber ob das alles erkennbar wird

          es gibt darin einen css block - der macht probleme - zeile 116

          wenn du shelly- adapter hast, könntest du das script sogar laufen lassen und in der vis ansehen

           //@liv-in-sky 2021  5.3.-10:11
          
          // DAS WIDGET IN DER VIS
          // das Standard html-Widget wird genutzt in der VIS - dazu den DP javascript.x.Tabellen@Liv.TestTabelleVIS.HTMLTableVis als binding angeben d.h.
          // im html-teil des widgets wird dier daten punkt in geschweiften klammern angegeben z.B. {javascript.0.Tabellen@Liv.TestTabelleVIS.HTMLTableVis}
          
          // @ts-ignore
          let braucheEinVISWidget=true;                          // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
          let  dpVIS="ShellyTabelleVIS"                            // WICHTIG wenn braucheEinVISWidget auf true gesetzt !!  Ist der Name zum datenpunkt anlegen
          let braucheEinJSON=false;                               // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
          let  dpJSON="ShellyTabelleJSON"                          // WICHTIG wenn braucheEinJSON auf true gesetzt !!   Ist der Name zum datenpunkt anlegen
          let mySchedule="  */15 * * * * ";                         // jede minute  
          
          //ZUSÄTZLICH VARIABLEN
          
          let sortierenEIN=true;
          let farbeInaktiverShelly="#5590CA"
          let welcheSortierung=2;          // je nach spalte von 0 bis 6
          let geteiteVersionsAnzeige=false; // version in spalte 7 wird 2-zeilig
          const schalterUmrahmung="0"                              //wenn überschriften buttons sind , den rahmen mit 0 wegmachen 
          
          //---------------------------------------
          
          //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3 - es MÜSSEN in allen Arrays die GLEICHE Anzahl für die Werte sein
          let val=             ["dummy1","dummy2","dummy3","dummy4","dummy5","dummy6","dummy7"];             // GLEICHE ANZAHL !! HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WERDEN -  jeder val[x] muss unten in der schleife gesetzt werden !!
          let Feld1lAlign=     ["left","center","center","center","center","left","left"];                     // GLEICHE ANZAHL !! AUSRICHTUNG IN DER SPALTE
          let htmlSpalte1Weite=["210","110","95","120","65","150","5"];                             // GLEICHE ANZAHL !! BREITE DER SPALTE, wenn nicht auto
          let htmlFeld=        ["NAME","IP","ONLINE","UPTIME","RSSI","ID","VERSION"];                        // GLEICHE ANZAHL !! NAME/ÜBERSCHRIFT DER SPALTE
          let schalterInSpaltenUeberschrift=[true,true,true,true,true,true,true];                            // WENN BUTTONS INSTALLIERT WERDEN - sonst false
          let symbolSchalter=              ["na","&check;","&cross;"];   // SYMBOLE DER BUTTONS - standardmäßig sind die spaltennamen (htmlFeld) genutzt - werden im standard nicht genutzt
          //-----------------------------------
          
          //Symbole für Tabelle z.b.: ⚪  ⚫ ⭕  🔴 🔵 ⏱ 💀 👍 👎 📑 💲 👀 🔹 ✅ ❌ ⚠️ mehr: https://emojiterra.com/de/ oder https://unicode-table.com/de/html-entities/
          
          //hier werden die styles für die tabelle definiert
          //ÜBERSCHRIFT ÜBER TABELLE
          const htmlUberschrift=true;                             // mit Überschrift über der tabelle
          const htmlSignature=false;                               // anstatt der Überscghrift eine signature: - kleiner - anliegend
          const htmlFeldUeber='Shelly Übersicht';                // für Überschrift und Signature falls htmlUberschrift und htmlSignature ist true
          const htmlFarbUber="white";                              // Farbe der Überschrift
          const htmlSchriftWeite="normal";                         // bold, normal - Fettschrift für Überschrift
          const htmlUEberFontGroesse="18px";                       // schriftgröße überschrift
          //SEITENLEISTE
          const ichWillSeitenLeiste=false;                          // links einblenden einer Seitenleiste
          const nameSeitenLeiste="SHELLY"
          const breiteSeitenleiste=25;
          const schriftGroesseSeitenleiste=18;
          const abstandSeitentextVonOben=6;
          const htmlFarbSeiteSchrift="white";
          const htmlBackgroundFarbeSeitenliste="transparent";
          //MEHRERE TABELLEN NEBENEINANDER
          let mehrfachTabelle=1;                                   // bis zu 3 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3 !!!
          const trennungsLinie=1;                                // extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
          const farbetrennungsLinie="#5590CA";                     // bei mehreren Tabellen nebeneinander wird ein Strich zw. den Tabellen gezogen
          const htmlFarbTableColorUber="white"                     // Spalten-Überschrift in der tabelle - für die einzelnen Spalten //"#BDBDBD"; 
          const htmlFarbZweiteTabelle="white";                     // Farbe der Spalten-Überschrift bei jeder 2.ten Tabelle        
          //ÜBERSCHRIFT SPALTEN - OBERSTE ZEILE IN TAB
          const UeberSchriftHoehe=40;                            // Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
          const LinieUnterUeberschrift="1";                        // Liniehoehe nur unter Spaltenüberschrift  
          const farbeLinieUnterUeberschrift="blue";               // LinienFarbe unter Spaltenüberschrift
          const groesseUeberschrift=16; 
          const UeberschriftStyle="normal"                         // möglich "bold"
          const UeberschriftSpalten=true;                          // ein- oder ausblenden der spatlen-überschriften
          //GANZE TABELLE
          const abstandZelle="4";                                  // legt den abstand in den zellen zum rahmen fest
          const zeilenAbstand=5;                                   // legt den abstand zwischen den zeilen fest
          const farbeUngeradeZeilen="#000000";                     // Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 - bei "transparent" gewinnt htmlFarbTableColorGradient1
          const farbeGeradeZeilen="#151515";                       // Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2   - bei "transparent" gewinnt htmlFarbTableColorGradient2
                                           // Weite der Tabelle - verhindert das dynamische breiter werden, wenn werte unterschiedliche werte haben
          const zentriert=true;                                    // ganze tabelle zentriert im html Widget - muss in pixel angegeben werden oder "auto"
          const backgroundAll="#000000";                           // Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
          const htmlSchriftart="Ubuntu-Regular"                    // "Jura-DemiBold"   //"RobotoCondensed-Bold"   //"Helvetica"; .....
          const htmlSchriftgroesse="16px";                         // schriftgröße in den zellen
          const rahmenBreite="1px";                                //mit 0 ist äußerer rahmen weg
          //FELDER UND RAHMEN
          const htmlFarbFelderschrift="#CBCBCA";                   // SchriftFarbe der Felder
          const htmlFarbFelderschrift2="#CBCBCA";                  // SchriftFarbe der Felder für jede 2te Tabelle
          const htmlGragient=[150,15,50];                          // einstellung des gradienten
          const htmlFarbTableColorGradient1="blue";         // Gradient - Hintergrund der Tabelle - Verlauffarbe
          const htmlFarbTableColorGradient2="#5590CA";              // Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
          const htmlFarbTableBorderColor="grey";                   // Farbe des Rahmen - ist dieser gleich den gradienten, sind die rahmen unsichtbar
          let htmlRahmenLinien="cols";                             // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
          
          // falls eine extra html datei gebraucht wird
          const path = "/htmlexample.html";                        //FIlenamen definieren
          const home ='vis.0'                                      //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta)
          let   braucheEinFile=false;                              // bei true wird ein file geschrieben
          
          // AB HIER NICHTS  ÄNDERN -------------------------------------------------------------------------------------------------
          // AB HIER NICHTS  ÄNDERN -------------------------------------------------------------------------------------------------
          // AB HIER NICHTS  ÄNDERN ---------------------------------erst wieder ab Zeile 134----------------------------------------
          
          let borderHelpBottum;
          let borderHelpRight;
          let htmlcenterHelp;
          let htmlcenterHelp2;
          
          if(String(htmlRahmenLinien)=="rows") {borderHelpBottum=1;borderHelpRight=0;}
          if(String(htmlRahmenLinien)=="cols") {borderHelpBottum=0;borderHelpRight=1;}
          if(String(htmlRahmenLinien)=="none") {borderHelpBottum=0;borderHelpRight=0;}
          if(String(htmlRahmenLinien)=="all")  {borderHelpBottum=1;borderHelpRight=1;}
          zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
          zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
          let weite="1045"; //px   
          let last
          let adad=0
          {for (let i=0;i<htmlSpalte1Weite.length;i++){
                           adad=adad+Number(htmlSpalte1Weite[i].replace("px","")) ;log(" ### "+adad.toString())} 
                               //last= Number(weite) -adad  ; log(last.toString())          
                               }  
          
          let hoeheTabelle=400;
          let hoeheTabelle2=hoeheTabelle-UeberSchriftHoehe-trennungsLinie
          let hoeheTabelleKorrigiert=hoeheTabelle+22                                               //border-spacing:"+abstandZelle+"px; padding:"+zeilenAbstand+"px; 
          let scrollbalken=6
          const htmlZentriert=   "<style>"+                     //position: fixed;margin-top: 40px;
                      /*thead*/         " .fixedHeader {    table-layout: fixed; width: "+weite+"px;   height: "+UeberSchriftHoehe+"px; border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+"; }"+ //
                     /*tbody */         " .scrollContent { display: block;  width:"+(Number(weite)-0)+"px; height: "+hoeheTabelle+"px;  overflow-y: scroll;   }"+ // height: "+hoeheTabelle2+"px; 
                     /*div*/            " .tableContainer { background-color: #8E898A; overflow:hidden;  }"+  //
                     /*table*/          " .tablezusatz { table-layout: fixed;  border:"+rahmenBreite+";  "+  //height: "+hoeheTabelle+"px; 
                                                       "width: "+weite+"px; color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+";"+
                                                       "font-family:"+htmlSchriftart+"; background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+htmlGragient[2]+"%); }"+
                                        " .mythclass0 { width:"+(Number(htmlSpalte1Weite[0])+0)+"px; border-spacing: 0px; padding: 0px; }"+  //text-align:"+Feld1lAlign[0]+"
                                        " .mythclass1 { width:"+(Number(htmlSpalte1Weite[1])-0)+"px;  }"+
                                        " .mythclass2 { width:"+(Number(htmlSpalte1Weite[2])-0)+"px;  }"+
                                        " .mythclass3 { width:"+(Number(htmlSpalte1Weite[3])+0)+"px; }"+
                                        " .mythclass4 { width:"+(Number(htmlSpalte1Weite[4])-0)+"px;  }"+
                                        " .mythclass5 { width:"+(Number(htmlSpalte1Weite[5])-0)+"px; }"+
                                  //      " .mythclass6 { width:px100%  }"+ //px100\% " +htmlSpalte1Weite[6]+"px
          
                                        " .myclasstr_uber_spalte { font-family:"+htmlSchriftart+"\; height:"+UeberSchriftHoehe+"px; color:"+htmlFarbTableColorUber+"; "+  //  border-spacing:"+abstandZelle+"px;
                                                                  "font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+"; border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+"}"+
                                        " .myclassueber_spalte_button     {color:"+htmlFarbTableColorUber+"}"+
                                        " .myclassueber_spalte_ohne_button{color:"+htmlFarbTableColorUber+"}"+
          
                                        " .myclasstr_gerade{background-color:"+farbeGeradeZeilen+" ; padding: 0px;}"+  //border-spacing:"+abstandZelle+"px; 
                                        " .myclasstr_ungerade{ background-color:"+farbeUngeradeZeilen+" ; padding: 0px;}"+ //border-spacing:"+abstandZelle+"px;
                                        " .myclasstd_normal{}"+
                                        " .myclasstd_trennungslinie{}"+
                                        " .thescroller::-webkit-scrollbar {width: 0px; }"+
                                        "</style>"+'<center>'
          
          
          const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html;  http-equiv=\"refresh\" content=\"30\"; charset=utf-8\">"+
                             "<style> * {  margin: 0;} body {background-color: "+backgroundAll+"; margin: 0 auto;  }"+
                             " p {padding-top: 10px; padding-bottom: 10px; text-align: "+htmlcenterHelp2+"}"+
                            // " div { margin: 0 auto;  margin-left: auto; margin-right: auto;}"+
                             " td { padding:"+abstandZelle+"px; border:0px solid "+htmlFarbTableBorderColor+";  border-right:"+borderHelpRight+"px solid "+htmlFarbTableBorderColor+";border-bottom:"+borderHelpBottum+"px solid "+htmlFarbTableBorderColor+";}"+ 
                             " table { width: "+weite+";  margin: 0 "+htmlcenterHelp+"; border:1px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                             "td:nth-child(1) {width: "+htmlSpalte1Weite[0]+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite[1]+"}"+
                             " </style></head><body> <div>";
          //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
          
          const htmlTabStyle= "<div class=\"tableContainer\" >"+
                             "<table class=\"tablezusatz\" rules=\""+htmlRahmenLinien+"\">"+
                             "<thead class=\"fixedHeader\">";
                           //  "<table class=\"tablezusatz\" bordercolor=\""+htmlFarbTableBorderColor+"\" border=\""+rahmenBreite+"\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+zeilenAbstand+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                           //     "; font-family:"+htmlSchriftart+";background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+htmlGragient[2]+"%);\"><thead class=\"fixedHeader\">";
          
          let htmlTabUeber4="<tr class=\"myclasstr_uber_spalte\">";
          //let htmlTabUeber4="<tr cellspacing=\""+abstandZelle+"\" font-family:\""+htmlSchriftart+"\"  height:"+UeberSchriftHoehe+"px; color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
          const htmlTabUeber3="</tr></thead><tbody class=\"scrollContent thescroller\"> ";
          
          
          const buttonScript =   '<script> function setOnOtherValue(myval) {	var Self = this;	Self.servConn.getStates(myval, (error, states) => {  console.log(states); self.servConn.setState(myval, !states[myval].val);}  )}; '
                               +'$( "button" ).click(function() {  $( this ).slideUp() });'
                               +'</script>'
          
          
          //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3
          let htmlTabUeber2=""
          for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { if (!schalterInSpaltenUeberschrift[ue] ) { 
                                                                htmlTabUeber2=htmlTabUeber2.concat("<th class=\"mythclass"+ue+" myclassueber_spalte_ohne_button\" >"+htmlFeld[ue]+"</th>")}           /*style=\"width:"+htmlSpalte1Weite[0]+";\"*/
                                                                else {let valButton="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+ue
                                                               htmlTabUeber2=htmlTabUeber2.concat("<th class=\"mythclass"+ue+" myclassueber_spalte_button\"  >"+"<button id=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundFarbeSeitenliste+"\; color: "+htmlFarbTableColorUber+"; font-family:"+htmlSchriftart+"; font-size:1em; text-align:left value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"+htmlFeld[ue]+"</button></th>")}  //symbolSchalter[ue] 
                                                                }
          /*
          for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { if (!schalterInSpaltenUeberschrift[ue] ) { 
                                                                htmlTabUeber2=htmlTabUeber2.concat("<th class=\"mythclass"+ue+"\" align="+Feld1lAlign[ue]+" style=\"color:"+htmlFarbTableColorUber+"\">"+htmlFeld[ue]+"</th>")} 
                                                                else {let valButton="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+ue
                                                               htmlTabUeber2=htmlTabUeber2.concat("<th class=\"mythclass"+ue+"\" align="+Feld1lAlign[ue]+">"+""+"<button id=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundFarbeSeitenliste+"\; color: "+htmlFarbTableColorUber+"; font-family:"+htmlSchriftart+" font\-size\:1em\; text\-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"+htmlFeld[ue]+"</button></th>")}  //symbolSchalter[ue] 
                                                                }
                                                                */
          
          htmlTabUeber2=htmlTabUeber2
          
          let  htmlTabUeber2_1=""
          for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { htmlTabUeber2_1=htmlTabUeber2_1.concat("<td width="+htmlSpalte1Weite[ue]+" align="+Feld1lAlign[ue]+" style=\"color:"+htmlFarbZweiteTabelle+"\">"+htmlFeld[ue]+"</td>")}
          
          //------------------------------------------------------
          if ( !(val.length == Feld1lAlign.length && htmlSpalte1Weite.length == htmlFeld.length && val.length == htmlFeld.length) || (mehrfachTabelle<1 || mehrfachTabelle>3) ) 
               { log("Anzahle der Definitions Arrays sind ungleich ODER mehrfachTabelle ist falsch - Script wurde gestoppt !!!","error");
                   // @ts-ignore
                   stopScript();}
          
          let langeGesamt=0; 
          let htmlTabUeber="";
          let htmlOut="";
          let mix;
          let counter;
          let makeJsonWidget;
          let myObject=[];
          
          let mitAlphabet=false;
          
          needDP();
          
          function writeHTML(){
          let seitenLeistenTest="";
          let htmlTabUeber1=htmlTabUeber4
          myObject=[]
          let helperLeerzeile=""
          let makeJsonWidget=[];
          htmlOut="";
          counter=-1;
          
          //--------------------------------------------------------------------------------------------------------------------------------------------------
          //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
          //---------alle val[x] werte müssen von euch bestimmt werden - val[0],val[1],val[2] !!!-------------------------------------------------------------
          //--------------------------------------------------------------------------------------------------------------------------------------------------
          
          let valueuptime
          
          $('shelly.*.*.name').each(function(id, i) {           // hier eigene schleife definieren und den wert counter++ nicht vergessen  !!!
               
          
          
                    var ida = id.split('.');
               
                 //   if(existsState(id) && existsState(id.replace("alive","uptime"))) {
          
                    getState(id).val!=null &&  getState(id).val!="" && getState(id).val!=undefined ?val[0]=getState(id).val : val[0]=" --- ";
                   
                   if (existsState(id.replace("name","hostname"))) val[1]=getState(id.replace("name","hostname")).val;
                   if (existsState(id.replace("name","online"))) val[2]=getState(id.replace("name","online")).val;
                   if (existsState(id.replace("name","uptime"))) val[3]=getState(id.replace("name","uptime")).val;
                   valueuptime=(Number(val[3].replace(/.*?([0-9][0-9]?)\:.*/,"$1"))*60*60)+
                                    (Number(val[3].replace(/.*?[0-9][0-9]?\:([0-9][0-9]?)\:.*/,"$1"))*60)+
                                    (Number(val[3].replace(/.*?[0-9][0-9]?\:[0-9][0-9]?\:([0-9][0-9]?).*/,"$1")))
                                 //   log(typeof val[3].replace(/^(.+)D.+/,"$1"))
                                    if( !val[3].replace(/^(.+)D.+/,"$1").includes(":")) valueuptime=valueuptime+Number(val[3].replace(/^(.+)D.+/,"$1"))*24*60*60
                                   // log(valueuptime.toString()+"  ----" +val[3].replace(/^(.+)D.+/,"$1"))
          
                   if (existsState(id.replace("name","rssi"))) val[4]=getState(id.replace("name","rssi")).val;
                   if (existsState(id.replace("name","id"))) val[5]=getState(id.replace("name","id")).val;
          
                   if (existsState(id.replace("name","version"))) val[6]=getState(id.replace("name","version")).val;                   
               
          
                  myObject.push({                "value0" : val[0],            //  "INSTANCE"
                                                 "value1" : val[1],            //  "SINCE"
                                                 "value2" : val[2],            //  "STATUS"
                                                 "value3" : val[3],            //  "INSTANCE"
                                                 "value4" : val[4],            //  "SINCE"
                                                 "value5" : val[5],
                                                 "value6":  val[6],
                                                 "valueuptime": valueuptime
                                                    //   ID
                                                                 })
                         
                    makeJsonWidget.push({        [htmlFeld[0]] : val[0],  //  "INSTANCE"
                                                 [htmlFeld[1]] : val[1],  //  "SINCE"
                                                 [htmlFeld[2]] : val[2],   //  "STATUS"
                                                 "vallly"      : getState(id).val
                                                                 })  
                  
                    
                   
                                                           // diese function muss als letztes in der eigenen schleife aufgerufen werden
             });                                            // Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
          
            // Sortierungen---------------------------------------------------------
            //welcheSortierung=3
            
           
            if( sortierenEIN && (welcheSortierung==3 || welcheSortierung==4 || welcheSortierung==1)    ) {
                       if(welcheSortierung==3) myObject.sort(function (alpha, beta) { return  Number(beta["value4"]) -Number(alpha["value4"]);   }); 
                       if(welcheSortierung==4) myObject.sort(function (alpha, beta) { /*log(beta.valueuptime+" --" +alpha.valueuptime);*/ return  beta.valueuptime -alpha.valueuptime;   });
                       if(welcheSortierung==1)   myObject.sort( function( a, b )   {
                                                   	a = a["value1"].split( '.' );
                                                   	b = b["value1"].split( '.' );
                                                 	for( var i = 0; i < a.length; i++ )	{
             	                                 	if( ( a[i] = parseInt( a[i] ) ) < ( b[i] = parseInt( b[i] ) ) )
             	                         		return -1;	else if( a[i] > b[i] )
             	                            	return 1;}  	return 0;} );                                      
          
                       } else {
              switch (welcheSortierung) {
                 case 0: sortMe("alpha","value0");break;  
                 case 1: break;
                 case 2: sortMe("bool","value2");break;  
                 case 3: break;  
                 case 4: break;  
                 case 5: sortMe("alpha","value5");break; 
                 case 6: sortMe("alpha","value6");break;
              }   }
          
             for(let zz=0;zz<myObject.length;zz++){
          
           // Unterüberschften ------------------------------------------------------       
                  if (mitAlphabet){
                    if( myObject[zz].value0[0]!=helperLeerzeile){ tabelleAusbessern();
                                                                  counter=-1;  for(let ic=0;ic<mehrfachTabelle;ic++ ) { for (let tt=0 ;tt<val.length;tt++) 
                                                                                                                            { tt==0 && ic==0 ? val[tt]=(myObject[zz].value0[0]).toUpperCase() : val[tt]="&ensp;"
                                                                                                                            }   
                                                                                                                        counter++;tabelleBind();langeGesamt++; }
                    helperLeerzeile=myObject[zz].value0[0] } ; sortierenEIN=false;}
          
           // Zuteilung der Tabellenspalten-------------------------------------------
          
              val[0]=myObject[zz].value0;
              val[1]=myObject[zz].value1;
              val[2]=myObject[zz].value2;
              let regH=myObject[zz].value3.trim().replace(/^(.+)[C-E].+?$/,"$1 d")
              if(regH.includes(":")) regH="";
              //log(myObject[zz].value3.replace(reg,"$1 d"))
              geteiteVersionsAnzeige ? val[3]=( (myObject[zz].value3.replace(/.+D(.+)/,"$1"))+"</br>"+regH)  :  val[3]=myObject[zz].value3.replace(/(.+D)(.*)/,"$2 +$1");
              val[4]=myObject[zz].value4+" dB";
              val[5]=myObject[zz].value5;
              geteiteVersionsAnzeige ? val[6]=myObject[zz].value6.replace(/^(.+?)\/(.+)/,"$1</br>$2")  : val[6]=myObject[zz].value6;  
              
              
             if (!myObject[zz].value2) {val[2]=symbolSchalter[2]}
              if (myObject[zz].value2)  {val[2]=symbolSchalter[1]}
             //  if(getState("javascript." + instance +".Tabellen@Liv."+dpVIS+".Spalte2").val) { val[2]=myObject[zz].value2} 
              if (!myObject[zz].value2) {     val[0]="<font color=\""+farbeInaktiverShelly +"\">"+val[0]+"</font>";
                                             val[1]="<font color=\""+farbeInaktiverShelly +"\">"+val[1]+"</font>";
                                             val[2]="<font color=\""+farbeInaktiverShelly +"\">"+val[2]+"</font>";
                                             val[3]="<font color=\""+farbeInaktiverShelly +"\">"+val[3]+"</font>";
                                             val[4]="<font color=\""+farbeInaktiverShelly +"\">"+val[4]+"</font>";
                                             val[5]="<font color=\""+farbeInaktiverShelly +"\">"+val[5]+"</font>";
                                             val[6]="<font color=\""+farbeInaktiverShelly +"\">"+val[6]+"</font>";
          
                                        }  
               counter++;                                       // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
               tabelleBind();                                   // HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  
               langeGesamt++;                                   // WICHTIG Seitenleiste
             }
          
          //-------------------------------------------------------------------------------------------------------------------------------------------------
          //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
          //-------------------------------------------------------------------------------------------------------------------------------------------------
          
          // Seitenleiste------------------------------------------------------------   
            let einmalAbstand=`</br>
          `
           for (let f=0;f<abstandSeitentextVonOben;f++){
               seitenLeistenTest=seitenLeistenTest+`<br>
          `}
           for (let i=0;i<nameSeitenLeiste.length;i++){
               seitenLeistenTest=seitenLeistenTest+nameSeitenLeiste[i]+`</br>
          ` }
           htmlTabUeber="";
           if (ichWillSeitenLeiste) htmlTabUeber1=htmlTabUeber1+"<td  style=\" background-color: "+htmlBackgroundFarbeSeitenliste+"; margin-top: 200px; color: "+htmlFarbSeiteSchrift+ ";font-size:"+schriftGroesseSeitenleiste+"px; vertical-align:top; text-align:center \" width=\""+breiteSeitenleiste+"\" rowspan=\""+(langeGesamt+1)+"\">"+seitenLeistenTest+"</td>"
           switch (mehrfachTabelle) { 
             case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
             case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
             case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2_1+htmlTabUeber3; break;
             case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
            };   
            if (!UeberschriftSpalten) {htmlTabUeber=""}
          
                tabelleFinish(); 
                if (braucheEinJSON ) {setStateDelayed("javascript." + instance + ".Tabellen@Liv."+dpVIS+".JSONVis",JSON.stringify(makeJsonWidget),1000 )}
               
          } // function ende
          
          //MAIN:
           
          schedule(mySchedule,  function () { 
           writeHTML();
           if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
          }); 
          setTimeout(function () {writeHTML();  }, 2050);                                 
          
           function tabelleBind(){
            
             switch (mehrfachTabelle) { 
          
             case 1: if(counter%2==0)   {htmlOut=htmlOut+"<tr class=\"myclasstr_gerade\">";
                                         for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td style=\"width:"+htmlSpalte1Weite[u]+"px\" align="+Feld1lAlign[u]+">"+val[u]+"</td>"); // style=\"width:"+htmlSpalte1Weite[u]+"\" 
                                                                      }  htmlOut=htmlOut.concat("</tr>");   break;
          
                                         } else   {htmlOut=htmlOut+"<tr class=\"myclasstr_ungerade\">";
                                                   for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td style=\"width:"+htmlSpalte1Weite[u]+"px\" align="+Feld1lAlign[u]+">"+val[u]+"</td>"); //style=\"width:"+htmlSpalte1Weite[u]+"\" 
                                                                                }  htmlOut=htmlOut.concat("</tr>");   break;
                                         }
             
             case 2: if(counter%4==0){  if(counter%2==0)  {htmlOut = htmlOut+"<tr class=\"myclasstr_gerade\">";
                                                           for(let u=0;u<val.length;u++){ if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");} else
                                                                                        {htmlOut=htmlOut.concat("<td style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld1lAlign[u]+">"+val[u]+"</td>")}
                                                                                        }  
                                                                                     
                                          } else { for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");
                                                                                }  htmlOut=htmlOut.concat("</tr>");  } break;
                                     } else {
                                       if(counter%2==0)  {htmlOut=htmlOut+"<tr class=\"myclasstr_ungerade\">";
                                                          for(let u=0;u<val.length;u++){  if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");} else
                                                                                       {htmlOut=htmlOut.concat("<td style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld1lAlign[u]+">"+val[u]+"</td>")}
                                                                                       }  
                                          } else {        for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");
                                                                                       }  htmlOut=htmlOut.concat("</tr>");  }  break;}
          
             case 3: if(counter%2==0)  {  if(counter%3==0 ) {htmlOut = htmlOut+"<tr class=\"myclasstr_gerade\">";
                                                             for(let u=0;u<val.length;u++){if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");} else
                                                                                          {htmlOut=htmlOut.concat("<td style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld1lAlign[u]+">"+val[u]+"</td>")}
                                                                                                                  }  
                                         } else { if(counter%3==1)  {for(let u=0;u<val.length;u++){  if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");} else
                                                                                                                        {htmlOut=htmlOut.concat("<td  align="+Feld1lAlign[u]+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ "; color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>")}
                                                                                                                  }  
                                                                    } else  { for(let u=0;u<val.length;u++){  htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");
                                                                                                           }  htmlOut=htmlOut.concat("</tr>");  } }  break;
                                       } 
                                       else {
                                          if(counter%3==0 )  {htmlOut = htmlOut+"<tr class=\"myclasstr_ungerade\">";
                                                             for(let u=0;u<val.length;u++){ if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");} else
                                                                                                               {htmlOut=htmlOut.concat("<td style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld1lAlign[u]+">"+val[u]+"</td>")}
                                                                                                                  }  
                                                                                                                  
                                       } else{ if(counter%3==1 )  { for(let u=0;u<val.length;u++){ if(u<val.length-1) {htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");} else
                                                                                                                      {htmlOut=htmlOut.concat("<td  align="+Feld1lAlign[u]+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ "; color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>")}
                                                                                                                  }  
                                                                   } else {        for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td align="+Feld1lAlign[u]+">"+val[u]+"</td>");
                                                                                                                }  htmlOut=htmlOut.concat("</tr>"); } } break;
                                       }                                        
          
          
                                          
                  } //switch ende
          
          }
          
           function tabelleAusbessern() {         // bessert mei mehrfachtabellen die nicht vollen zeilenn aus - bevor die unterüberschriften kommen
          
          switch (mehrfachTabelle) {
                  
                 case 1:    break;
                 case 2:    let helpMehrfach="</td>";
                            for(let w=0;w<val.length;w++){helpMehrfach=helpMehrfach.concat("<td>&ensp;</td>")};helpMehrfach=helpMehrfach.concat("</tr>")
                            if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach);
                            break;
                 case 3:   let helpMehrfach2="</td>";
                           for(let w=0;w<val.length;w++){helpMehrfach2=helpMehrfach2.concat("<td>&ensp;</td>")};helpMehrfach2=helpMehrfach2.concat("</tr>")
                           if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                           if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach2);
                           let helpMehrfach3="</td>";
                           let helpMehrfach31="";for(let w=0;w<val.length;w++){helpMehrfach31=helpMehrfach31.concat("<td>&ensp;</td>")}
                           for(let w=0;w<val.length;w++){if(w<val.length-1) {helpMehrfach3=helpMehrfach3.concat("<td>&ensp;</td>")} else
                                                                   {helpMehrfach3=helpMehrfach3.concat("<td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td>"+helpMehrfach31)}
                                                             };helpMehrfach3=helpMehrfach3.concat("</tr>")        
                           if(counter%3==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach3);  break; }}
          
           function tabelleFinish() {
          
          switch (mehrfachTabelle) {
                  
                 case 1:    break;
                 case 2:    let helpMehrfach="</td>";
                            for(let w=0;w<val.length;w++){helpMehrfach=helpMehrfach.concat("<td>&ensp;</td>")};helpMehrfach=helpMehrfach.concat("</tr>")
                            if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach);
                            break;
                 case 3:   let helpMehrfach2="</td>";
                           for(let w=0;w<val.length;w++){helpMehrfach2=helpMehrfach2.concat("<td>&ensp;</td>")};helpMehrfach2=helpMehrfach2.concat("</tr>")
                           if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                           if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach2);
                           let helpMehrfach3="</td>";
                           let helpMehrfach31="";for(let w=0;w<val.length;w++){helpMehrfach31=helpMehrfach31.concat("<td>&ensp;</td>")}
                           for(let w=0;w<val.length;w++){if(w<val.length-1) {helpMehrfach3=helpMehrfach3.concat("<td>&ensp;</td>")} else
                                                                   {helpMehrfach3=helpMehrfach3.concat("<td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td>"+helpMehrfach31)}
                                                             };helpMehrfach3=helpMehrfach3.concat("</tr>")        
                           if(counter%3==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach3);  break; }
               
                   var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlUEberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((new Date().getTime())), 'SS:mm:ss')+"</p>"; 
              
                  var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: center;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((new Date().getTime())), "SS:mm:ss");+"</div>";
                  
                  if (!htmlSignature) htmlUnter="";
                       var htmlOutVIS="";
                       if (htmlUberschrift) 
                          { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div>"+htmlUnter+ buttonScript ;
                      } else {
                         zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div>"+htmlUnter+ buttonScript :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div>"+htmlUnter+ buttonScript;
                      }
                          
          
            // log("bin raus aus tabelleBind");
                     if (braucheEinVISWidget)  setStateDelayed("javascript." + instance + ".Tabellen@Liv."+dpVIS+".HTMLTableVis", htmlOutVIS ,1000);
          
           var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((new Date().getTime())), "SS:mm:ss");+"</div>"
          
           if (!htmlSignature) htmlUnter="";
            var htmlEnd="</table>"+htmlUnter+"</div></body>";
           //mit oder ohne überschrift - zentriert oder links
          htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
           //log(htmlOut);
          
          
          }
          
          async function needDP(){
             for(let s=0;s<schalterInSpaltenUeberschrift.length;s++){ if(schalterInSpaltenUeberschrift[s]){
             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+s))) {
                 await createStateAsync("Tabellen@Liv."+dpVIS+".Spalte"+s, false,{type: "boolean", name: "Schalter_Spalte"+s, role: "value", read: true, write: true, } ); } 
               }}
          
             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".HTMLTableVis"))) {
                 await createStateAsync("Tabellen@Liv."+dpVIS+".HTMLTableVis", "empty",{type: "string", name: "HTML_Standard_Widget_mit_Binding", role: "value", read: true, write: true, } ); } 
              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".JSONVis"))) {
                 await createStateAsync("Tabellen@Liv."+dpVIS+".JSONVis", "",{type: "string", name: "JSON Format", role: "value", read: true, write: true, } ); }   
             
          
          
          
          }
            setTimeout(function () { 
          
             let arrTriggerSchalter=[]
             $("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte*").each(function(id, i) {  
                    arrTriggerSchalter.push(id) 
             });
           //  log(arrTriggerSchalter.toString())
             on({id: arrTriggerSchalter, ack: false, change: "any"}, function (obj) { 
               //  log(obj.id)
               if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte0") welcheSortierung=0;
               if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte1" )  welcheSortierung=1 ;
               if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte2" )  welcheSortierung=2; 
               if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte4")  welcheSortierung=3;
               if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte3" )  welcheSortierung=4;
               if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte5") welcheSortierung=5;
               if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte6" )  welcheSortierung=6; 
               
             //  log(String(mehrfachTabelle))
            setTimeout(function () {  
                 writeHTML();
                 if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
          }, 900);
              
          
               
             });}, 5050);
          
          
          //SORTIEREN
          function sortMe(myType,value){
          
          if(myType=="alpha" ){ myObject.sort(function (alpha, beta) {
                      if ((alpha[value].toString().toUpperCase()).trim() > (beta[value].toString().toUpperCase()).trim())
                         return 1;
                      if ((beta[value].toString().toUpperCase()).trim()> (alpha[value].toUpperCase().toString()).trim())
                         return -1;
                      return 0;
                     });}
          if(myType=="bool" ) {
               
            myObject .sort(function(x, y) { return x[value] - y[value] }); }       
          
          
            if(myType=="num" )   { myObject.sort(function (alpha, beta) {
                               return  beta[value] -alpha[value];   });}
          
          }
          
          
          
          
          

          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          schrieb am zuletzt editiert von OliverIO
          #4

          @liv-in-sky

          Hab mal gerade im Internet gesucht.
          und Beispiele gefunden, welches ich nach jsfiddle kopiert habe

          https://jsfiddle.net/oweitman/8xcj0mqu/

          wichtig ist wohl, das jede Zelle (th's und alle td's eine Breitenangabe bekommen, sonst haben die Zellen in den unterschiedlichen Zeilen unterschiedliche Breiten.
          Simulieren kannst du das, indem du bei css das td in xtd änderst. dadurch gilt die Breitenangabe nicht mehr für die td's.
          Wenn du fr jede Spalte unterschiedliche Breiten haben willst, dann solltest du für jede Spalte eine eigene css-Klasse definieren.
          Hast du ja mit mythclass0... auch schon gemacht.

          Kannst du mal direkt das HTML-Ergebnis kopieren. Das Skript kann ich so nicht laufen lassen. Da ich kein shelly habe.
          Kopieren kannst du am besten wie folgt:

          im Browser in deine Tabelle rechts klicken und "Untersuchen" auswählen.
          Dann im öffnenden Fenster das komplette HTML kopieren und hier in code-Tags einfgen. Aus dem Code sehe ich, das du das als eigenständige Seite anzeigen lässt.

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          liv-in-skyL 2 Antworten Letzte Antwort
          0
          • OliverIOO OliverIO

            @liv-in-sky

            Hab mal gerade im Internet gesucht.
            und Beispiele gefunden, welches ich nach jsfiddle kopiert habe

            https://jsfiddle.net/oweitman/8xcj0mqu/

            wichtig ist wohl, das jede Zelle (th's und alle td's eine Breitenangabe bekommen, sonst haben die Zellen in den unterschiedlichen Zeilen unterschiedliche Breiten.
            Simulieren kannst du das, indem du bei css das td in xtd änderst. dadurch gilt die Breitenangabe nicht mehr für die td's.
            Wenn du fr jede Spalte unterschiedliche Breiten haben willst, dann solltest du für jede Spalte eine eigene css-Klasse definieren.
            Hast du ja mit mythclass0... auch schon gemacht.

            Kannst du mal direkt das HTML-Ergebnis kopieren. Das Skript kann ich so nicht laufen lassen. Da ich kein shelly habe.
            Kopieren kannst du am besten wie folgt:

            im Browser in deine Tabelle rechts klicken und "Untersuchen" auswählen.
            Dann im öffnenden Fenster das komplette HTML kopieren und hier in code-Tags einfgen. Aus dem Code sehe ich, das du das als eigenständige Seite anzeigen lässt.

            liv-in-skyL Offline
            liv-in-skyL Offline
            liv-in-sky
            schrieb am zuletzt editiert von
            #5

            @oliverio

            die class wird schon zugewiesen - zeile 175 - geht über eine schleife

            letztlich will ich am ende das style sheet über eine funktion erzeugen, damit (weil das script ein template wird) nicht immer ie selben klassen in einer view in mehreen widgets sind - die mythclass -en bekommen dann auch nioch einen eindeutigen namen

            ich kann die garnicht sgen, wieviele fiddle ich schon duch hab - aber das von dir kenne ich noch nicht

            evl werde ich die beiden teile einfach in zwei tabellen übereinander anzeigen - der thead ist dan eine tabelle und der tbody eine andere

            das ganze funktioniert so rudimentär - das eigentlich problem ist ja, das im thead immer eine kleine anzahl pixel dazukommt, wo ich nicht kapiere, wo die herkommen - und wenn ich die gesamt ebreite verändere sind diese ghost pixel auch wieder anders - ich kann die also nirgends abziehen

            heir mal ein beispiel - die width ist 1045 - sieht dann so aus

            ändere ich auf 945 ist der 2te teil und die letzte änderung ist 1145 ( ich habe keine anhnung warum genau bei 1045 es funktionert - bei 1020 ist schon chaos.

            AApossis (15).gif

            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

            liv-in-skyL 1 Antwort Letzte Antwort
            0
            • OliverIOO OliverIO

              @liv-in-sky

              Hab mal gerade im Internet gesucht.
              und Beispiele gefunden, welches ich nach jsfiddle kopiert habe

              https://jsfiddle.net/oweitman/8xcj0mqu/

              wichtig ist wohl, das jede Zelle (th's und alle td's eine Breitenangabe bekommen, sonst haben die Zellen in den unterschiedlichen Zeilen unterschiedliche Breiten.
              Simulieren kannst du das, indem du bei css das td in xtd änderst. dadurch gilt die Breitenangabe nicht mehr für die td's.
              Wenn du fr jede Spalte unterschiedliche Breiten haben willst, dann solltest du für jede Spalte eine eigene css-Klasse definieren.
              Hast du ja mit mythclass0... auch schon gemacht.

              Kannst du mal direkt das HTML-Ergebnis kopieren. Das Skript kann ich so nicht laufen lassen. Da ich kein shelly habe.
              Kopieren kannst du am besten wie folgt:

              im Browser in deine Tabelle rechts klicken und "Untersuchen" auswählen.
              Dann im öffnenden Fenster das komplette HTML kopieren und hier in code-Tags einfgen. Aus dem Code sehe ich, das du das als eigenständige Seite anzeigen lässt.

              liv-in-skyL Offline
              liv-in-skyL Offline
              liv-in-sky
              schrieb am zuletzt editiert von
              #6

              @oliverio

              das ist der html code

              <style> .fixedHeader {    table-layout: fixed; width: 1045px;   height: 40px; border-bottom: 1px solid blue; } .scrollContent { display: block;  width:1045px; height: 400px;  overflow-y: scroll;   } .tableContainer { background-color: #8E898A; overflow:hidden;  } .tablezusatz { table-layout: fixed;  border:1px;  width: 1045px; color:#CBCBCA;  font-size:16px;font-family:Ubuntu-Regular; background-image: linear-gradient(150deg,#5590CA 15%,blue 50%); } .mythclass0 { width:210px; border-spacing: 0px; padding: 0px; } .mythclass1 { width:110px;  } .mythclass2 { width:95px;  } .mythclass3 { width:120px; } .mythclass4 { width:65px;  } .mythclass5 { width:150px; } .myclasstr_uber_spalte { font-family:Ubuntu-Regular; height:40px; color:white; font-size: 16px; font-weight: normal; border-bottom: 1px solid blue} .myclassueber_spalte_button     {color:white} .myclassueber_spalte_ohne_button{color:white} .myclasstr_gerade{background-color:#151515 ; padding: 0px;} .myclasstr_ungerade{ background-color:#000000 ; padding: 0px;} .myclasstd_normal{} .myclasstd_trennungslinie{} .thescroller::-webkit-scrollbar {width: 0px; }</style><center><table<p style="color:white; font-family:Ubuntu-Regular; font-size: 18px; font-weight:normal">Shelly Übersicht&ensp;&ensp;Last Update: 19:45:00</p><div class="tableContainer" ><table class="tablezusatz" rules="cols"><thead class="fixedHeader"><tr class="myclasstr_uber_spalte"><th class="mythclass0 myclassueber_spalte_button"  ><button id="myButtShellyTabelleVIS" style=" border-radius: 4px; border:0px solid; background-color: transparent; color: white; font-family:Ubuntu-Regular; font-size:1em; text-align:left value="toggle" onclick="setOnOtherValue('javascript.0.Tabellen@Liv.ShellyTabelleVIS.Spalte0')">NAME</button></th><th class="mythclass1 myclassueber_spalte_button"  ><button id="myButtShellyTabelleVIS" style=" border-radius: 4px; border:0px solid; background-color: transparent; color: white; font-family:Ubuntu-Regular; font-size:1em; text-align:left value="toggle" onclick="setOnOtherValue('javascript.0.Tabellen@Liv.ShellyTabelleVIS.Spalte1')">IP</button></th><th class="mythclass2 myclassueber_spalte_button"  ><button id="myButtShellyTabelleVIS" style=" border-radius: 4px; border:0px solid; background-color: transparent; color: white; font-family:Ubuntu-Regular; font-size:1em; text-align:left value="toggle" onclick="setOnOtherValue('javascript.0.Tabellen@Liv.ShellyTabelleVIS.Spalte2')">ONLINE</button></th><th class="mythclass3 myclassueber_spalte_button"  ><button id="myButtShellyTabelleVIS" style=" border-radius: 4px; border:0px solid; background-color: transparent; color: white; font-family:Ubuntu-Regular; font-size:1em; text-align:left value="toggle" onclick="setOnOtherValue('javascript.0.Tabellen@Liv.ShellyTabelleVIS.Spalte3')">UPTIME</button></th><th class="mythclass4 myclassueber_spalte_button"  ><button id="myButtShellyTabelleVIS" style=" border-radius: 4px; border:0px solid; background-color: transparent; color: white; font-family:Ubuntu-Regular; font-size:1em; text-align:left value="toggle" onclick="setOnOtherValue('javascript.0.Tabellen@Liv.ShellyTabelleVIS.Spalte4')">RSSI</button></th><th class="mythclass5 myclassueber_spalte_button"  ><button id="myButtShellyTabelleVIS" style=" border-radius: 4px; border:0px solid; background-color: transparent; color: white; font-family:Ubuntu-Regular; font-size:1em; text-align:left value="toggle" onclick="setOnOtherValue('javascript.0.Tabellen@Liv.ShellyTabelleVIS.Spalte5')">ID</button></th><th class="mythclass6 myclassueber_spalte_button"  ><button id="myButtShellyTabelleVIS" style=" border-radius: 4px; border:0px solid; background-color: transparent; color: white; font-family:Ubuntu-Regular; font-size:1em; text-align:left value="toggle" onclick="setOnOtherValue('javascript.0.Tabellen@Liv.ShellyTabelleVIS.Spalte6')">VERSION</button></th></tr></thead><tbody class="scrollContent thescroller"> <tr class="myclasstr_gerade"><td style="width:210px" align=left><font color="#5590CA"> --- </font></td><td style="width:110px" align=center><font color="#5590CA">10.10.10.0</font></td><td style="width:95px" align=center><font color="#5590CA">&cross;</font></td><td style="width:120px" align=center><font color="#5590CA">00:00:19</font></td><td style="width:65px" align=center><font color="#5590CA">-62 dB</font></td><td style="width:150px" align=left><font color="#5590CA">shellybutton1</font></td><td style="width:5px" align=left><font color="#5590CA">20201210-145729/?@47dcf392/wjn4949494949494</font></td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left><font color="#5590CA"> --- </font></td><td style="width:110px" align=center><font color="#5590CA">10.10.10.26</font></td><td style="width:95px" align=center><font color="#5590CA">&cross;</font></td><td style="width:120px" align=center><font color="#5590CA">00:05:44</font></td><td style="width:65px" align=center><font color="#5590CA">-56 dB</font></td><td style="width:150px" align=left><font color="#5590CA">ShellyVintage</font></td><td style="width:5px" align=left><font color="#5590CA">20191216-140157/???</font></td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left><font color="#5590CA"> --- </font></td><td style="width:110px" align=center><font color="#5590CA">10.10.10.27</font></td><td style="width:95px" align=center><font color="#5590CA">&cross;</font></td><td style="width:120px" align=center><font color="#5590CA">00:05:43</font></td><td style="width:65px" align=center><font color="#5590CA">-58 dB</font></td><td style="width:150px" align=left><font color="#5590CA">ShellyVintage</font></td><td style="width:5px" align=left><font color="#5590CA">20191216-140157/???</font></td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Leinwand L3</td><td style="width:110px" align=center>10.15.1.2</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>03:07:56 +14D</td><td style="width:65px" align=center>-50 dB</td><td style="width:150px" align=left>shellycolorbulb</td><td style="width:5px" align=left>20210122-154226/v1.10.0-rc1@00eeaa9b</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>Leinwand L2</td><td style="width:110px" align=center>10.11.12.3</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>03:08:15 +14D</td><td style="width:65px" align=center>-46 dB</td><td style="width:150px" align=left>shellycolorbulb</td><td style="width:5px" align=left>20210122-154226/v1.10.0-rc1@00eeaa9b</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Leinwand L4</td><td style="width:110px" align=center>10.12.12.3</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>00:45:41 +14D</td><td style="width:65px" align=center>-55 dB</td><td style="width:150px" align=left>shellycolorbulb</td><td style="width:5px" align=left>20210107-122133/1.9_GU10_RGBW@07531e29</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>Leinwand L1</td><td style="width:110px" align=center>10.13.12.3</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>03:08:03 +14D</td><td style="width:65px" align=center>-54 dB</td><td style="width:150px" align=left>shellycolorbulb</td><td style="width:5px" align=left>20210122-154226/v1.10.0-rc1@00eeaa9b</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Shelly Motion</td><td style="width:110px" align=center>10.10.10.5</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>01:13:59 +2D</td><td style="width:65px" align=center>-58 dB</td><td style="width:150px" align=left>shellymotionsensor</td><td style="width:5px" align=left>20210226-072307/v1.1.0@f31e1d2b</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>Shelly PlugS 2</td><td style="width:110px" align=center>10.10.10.6</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>19:56:18 +6D</td><td style="width:65px" align=center>-72 dB</td><td style="width:150px" align=left>shellyplug-s</td><td style="width:5px" align=left>20210201-180007/1.9.5-rc1@eff8f8e8</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Plug S  Kühlschrank</td><td style="width:110px" align=center>10.10.10.7</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>06:42:03 +5D</td><td style="width:65px" align=center>-69 dB</td><td style="width:150px" align=left>shellyplug-s</td><td style="width:5px" align=left>20210201-180007/1.9.5-rc1@eff8f8e8</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>Sideboard</td><td style="width:110px" align=center>10.10.10.8</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>05:30:49 +17D</td><td style="width:65px" align=center>-72 dB</td><td style="width:150px" align=left>shelly1</td><td style="width:5px" align=left>20210201-175310/1.9.5-rc1@eff8f8e8</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Tablet laden</td><td style="width:110px" align=center>10.10.10.9</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>05:30:32 +17D</td><td style="width:65px" align=center>-52 dB</td><td style="width:150px" align=left>shelly1</td><td style="width:5px" align=left>20210201-175310/1.9.5-rc1@eff8f8e8</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>XXX2</td><td style="width:110px" align=center>10.10.10.10</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>06:35:34 +1D</td><td style="width:65px" align=center>-62 dB</td><td style="width:150px" align=left>shellyswitch25</td><td style="width:5px" align=left>20210303-085536/v1.10.0-rc2-153-gd87589bc6-master</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Kino LW Maskierung</td><td style="width:110px" align=center>10.10.10.11</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>08:01:25 +17D</td><td style="width:65px" align=center>-53 dB</td><td style="width:150px" align=left>shellyswitch25</td><td style="width:5px" align=left>20210131-113247/release-1.9@daab228d+</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>Duschbad</td><td style="width:110px" align=center>10.10.10.12</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>00:39:24</td><td style="width:65px" align=center>-70 dB</td><td style="width:150px" align=left>shellyswitch25</td><td style="width:5px" align=left>20210304-132323/v1.10.0-rc2-158-ge6f231958-master</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Wohnzimmer Lichtschalter</td><td style="width:110px" align=center>10.10.10.13</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>02:12:32 +18D</td><td style="width:65px" align=center>-72 dB</td><td style="width:150px" align=left>shellyswitch25</td><td style="width:5px" align=left>20210131-113247/release-1.9@daab228d+</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>WZ-Rollo-links</td><td style="width:110px" align=center>10.10.10.14</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>00:41:10</td><td style="width:65px" align=center>-46 dB</td><td style="width:150px" align=left>shellyswitch25</td><td style="width:5px" align=left>20210304-132323/v1.10.0-rc2-158-ge6f231958-master</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>WZ-Rollo-rechts-Tür</td><td style="width:110px" align=center>10.10.10.15</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>20:33:40</td><td style="width:65px" align=center>-56 dB</td><td style="width:150px" align=left>shellyswitch25</td><td style="width:5px" align=left>20210303-085536/v1.10.0-rc2-153-gd87589bc6-master</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>Kino Leinwand</td><td style="width:110px" align=center>10.10.10.16</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>02:18:33 +18D</td><td style="width:65px" align=center>-58 dB</td><td style="width:150px" align=left>shellyswitch25</td><td style="width:5px" align=left>20210131-113247/release-1.9@daab228d+</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left> --- </td><td style="width:110px" align=center>10.10.10.17</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>14:00:59</td><td style="width:65px" align=center>-73 dB</td><td style="width:150px" align=left>shellyswitch25</td><td style="width:5px" align=left>20210129-101418/sdk3.0@0c8d3ddf+</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>Badezimmer</td><td style="width:110px" align=center>10.10.10.18</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>00:41:12</td><td style="width:65px" align=center>-61 dB</td><td style="width:150px" align=left>shellyswitch25</td><td style="width:5px" align=left>20210304-132323/v1.10.0-rc2-158-ge6f231958-master</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Daniel Rolladen</td><td style="width:110px" align=center>10.10.10.19</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>19:28:39 +19D</td><td style="width:65px" align=center>-48 dB</td><td style="width:150px" align=left>shellyswitch25</td><td style="width:5px" align=left>20210131-113247/release-1.9@daab228d+</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>Jessica Stehlampe</td><td style="width:110px" align=center>10.10.10.20</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>22:26:17 +8D</td><td style="width:65px" align=center>-47 dB</td><td style="width:150px" align=left>shelly1pm</td><td style="width:5px" align=left>20210201-180115/1.9.5-rc1@eff8f8e8</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Daniel Lichtschalter</td><td style="width:110px" align=center>10.10.10.21</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>02:18:18 +18D</td><td style="width:65px" align=center>-56 dB</td><td style="width:150px" align=left>shelly1pm</td><td style="width:5px" align=left>20210201-180115/1.9.5-rc1@eff8f8e8</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>Küche Lichtschalter</td><td style="width:110px" align=center>10.10.10.22</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>03:24:02 +18D</td><td style="width:65px" align=center>-59 dB</td><td style="width:150px" align=left>shelly1pm</td><td style="width:5px" align=left>20210201-180115/1.9.5-rc1@eff8f8e8</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Jessica Lichtschalter</td><td style="width:110px" align=center>10.10.10.23</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>12:16:52 +15D</td><td style="width:65px" align=center>-57 dB</td><td style="width:150px" align=left>shelly1pm</td><td style="width:5px" align=left>20210201-180115/1.9.5-rc1@eff8f8e8</td></tr><tr class="myclasstr_gerade"><td style="width:210px" align=left>Schlafzimmer Lichtschalter</td><td style="width:110px" align=center>10.10.10.24</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>12:17:16 +9D</td><td style="width:65px" align=center>-51 dB</td><td style="width:150px" align=left>shelly1pm</td><td style="width:5px" align=left>20210201-180115/1.9.5-rc1@eff8f8e8</td></tr><tr class="myclasstr_ungerade"><td style="width:210px" align=left>Duschbad Steckdose </td><td style="width:110px" align=center>10.10.10.25</td><td style="width:95px" align=center>&check;</td><td style="width:120px" align=center>23:07:12 +8D</td><td style="width:65px" align=center>-73 dB</td><td style="width:150px" align=left>shelly1pm</td><td style="width:5px" align=left>20210201-180115/1.9.5-rc1@eff8f8e8</td></tr></tbody></table></div><script> function setOnOtherValue(myval) {	var Self = this;	Self.servConn.getStates(myval, (error, states) => {  console.log(states); self.servConn.setState(myval, !states[myval].val);}  )}; $( "button" ).click(function() {  $( this ).slideUp() });</script>
              

              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 Antwort Letzte Antwort
              0
              • liv-in-skyL liv-in-sky

                @oliverio

                die class wird schon zugewiesen - zeile 175 - geht über eine schleife

                letztlich will ich am ende das style sheet über eine funktion erzeugen, damit (weil das script ein template wird) nicht immer ie selben klassen in einer view in mehreen widgets sind - die mythclass -en bekommen dann auch nioch einen eindeutigen namen

                ich kann die garnicht sgen, wieviele fiddle ich schon duch hab - aber das von dir kenne ich noch nicht

                evl werde ich die beiden teile einfach in zwei tabellen übereinander anzeigen - der thead ist dan eine tabelle und der tbody eine andere

                das ganze funktioniert so rudimentär - das eigentlich problem ist ja, das im thead immer eine kleine anzahl pixel dazukommt, wo ich nicht kapiere, wo die herkommen - und wenn ich die gesamt ebreite verändere sind diese ghost pixel auch wieder anders - ich kann die also nirgends abziehen

                heir mal ein beispiel - die width ist 1045 - sieht dann so aus

                ändere ich auf 945 ist der 2te teil und die letzte änderung ist 1145 ( ich habe keine anhnung warum genau bei 1045 es funktionert - bei 1020 ist schon chaos.

                AApossis (15).gif

                liv-in-skyL Offline
                liv-in-skyL Offline
                liv-in-sky
                schrieb am zuletzt editiert von liv-in-sky
                #7

                @liv-in-sky
                @OliverIO

                sagte in suche hilfe bei tabelle mit scroll im tbody:

                evl werde ich die beiden teile einfach in zwei tabellen übereinander anzeigen - der thead ist dan eine tabelle und der tbody eine andere

                das sieht nicht schlecht aus - da glaube ich , bin ich besser unterwegs

                habe thead noch nicht rausgenommen

                Image 2.png

                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

                OliverIOO 1 Antwort Letzte Antwort
                0
                • liv-in-skyL liv-in-sky

                  @liv-in-sky
                  @OliverIO

                  sagte in suche hilfe bei tabelle mit scroll im tbody:

                  evl werde ich die beiden teile einfach in zwei tabellen übereinander anzeigen - der thead ist dan eine tabelle und der tbody eine andere

                  das sieht nicht schlecht aus - da glaube ich , bin ich besser unterwegs

                  habe thead noch nicht rausgenommen

                  Image 2.png

                  OliverIOO Offline
                  OliverIOO Offline
                  OliverIO
                  schrieb am zuletzt editiert von
                  #8

                  @liv-in-sky

                  puh, da sind einige baustellen.
                  du solltest den erzeugten html code mal in einen syntax-prüfer stecken oder bei jsfiddle mal reinkopieren. da sind einige fehler drin.

                  1. der äußere table sollte evtl ein div sein. dazu ist innerhalb überhaupt keine weitere tabellendefinition enthalten, ausserdem enthält diese ebenfalls einen syntax-fehler, weil das table-tag nicht geschlossen ist.
                  2. in den th-zellen ist bei toggle ein syntaxfehler, glaub ein anführungsstrich zu viel
                  3. warum verwendest du bei den td-zellen nicht die gleichen breiten klassen wie für die th's? mythclass0 ... so können sich durch abweichungen schnell fehler einschleichen
                  4. das separate font-element innderhalb mancher td's würde ich entweder durch eine eigene css-klasse für die td's ergänzen tauschen
                  5. für die breitenangaben der spalten und der tabelle würde ich nur mit prozent arbeiten. sonst hast du eine weitere fehlerquelle, wenn die summe der spaltenpixel die breite der tabelle überschreitet
                  6. mit der generellen css angabe box-sizing: border-box; habe ich gute erfahrungen gemacht, da ansonsten die border immer noch auf die breite oben drauf gezählt wird (siehe dann dazu auch 5.) allerdings verwedne ich meisst nur div tabellen
                  7. das letzte problem ist, das durch den scrollbar die breite von thead und tbody von einander abweichen, table,td,th haben so einen größenberechnungsautomatismus.

                  ich würde dir raten, das mit div elemente zu machen
                  du kannst eom besipiel hier anschauen
                  https://css-tricks.com/position-sticky-and-table-headers/

                  Meine Adapter und Widgets
                  TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                  Links im Profil

                  liv-in-skyL 3 Antworten Letzte Antwort
                  0
                  • OliverIOO OliverIO

                    @liv-in-sky

                    puh, da sind einige baustellen.
                    du solltest den erzeugten html code mal in einen syntax-prüfer stecken oder bei jsfiddle mal reinkopieren. da sind einige fehler drin.

                    1. der äußere table sollte evtl ein div sein. dazu ist innerhalb überhaupt keine weitere tabellendefinition enthalten, ausserdem enthält diese ebenfalls einen syntax-fehler, weil das table-tag nicht geschlossen ist.
                    2. in den th-zellen ist bei toggle ein syntaxfehler, glaub ein anführungsstrich zu viel
                    3. warum verwendest du bei den td-zellen nicht die gleichen breiten klassen wie für die th's? mythclass0 ... so können sich durch abweichungen schnell fehler einschleichen
                    4. das separate font-element innderhalb mancher td's würde ich entweder durch eine eigene css-klasse für die td's ergänzen tauschen
                    5. für die breitenangaben der spalten und der tabelle würde ich nur mit prozent arbeiten. sonst hast du eine weitere fehlerquelle, wenn die summe der spaltenpixel die breite der tabelle überschreitet
                    6. mit der generellen css angabe box-sizing: border-box; habe ich gute erfahrungen gemacht, da ansonsten die border immer noch auf die breite oben drauf gezählt wird (siehe dann dazu auch 5.) allerdings verwedne ich meisst nur div tabellen
                    7. das letzte problem ist, das durch den scrollbar die breite von thead und tbody von einander abweichen, table,td,th haben so einen größenberechnungsautomatismus.

                    ich würde dir raten, das mit div elemente zu machen
                    du kannst eom besipiel hier anschauen
                    https://css-tricks.com/position-sticky-and-table-headers/

                    liv-in-skyL Offline
                    liv-in-skyL Offline
                    liv-in-sky
                    schrieb am zuletzt editiert von
                    #9

                    @oliverio

                    Erstmal vielen Dank

                    Ich hatte schon bemerkt, das einiger Fehler drin sein müssen, da mein HTML Checker nicht durch lief. Aber nach so vielen ausprobieren war die Konzentration am Tiefpunkt

                    Ich werde morgen in Ruhe nochmals deine Punkte durchgehen und im Scripte wieder aufräumen.

                    ich habe mittlerweile schon einige knifflige Sachen hinbekommen, aber das hier hat heute echt genervt :-)

                    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 Antwort Letzte Antwort
                    0
                    • OliverIOO OliverIO

                      @liv-in-sky

                      puh, da sind einige baustellen.
                      du solltest den erzeugten html code mal in einen syntax-prüfer stecken oder bei jsfiddle mal reinkopieren. da sind einige fehler drin.

                      1. der äußere table sollte evtl ein div sein. dazu ist innerhalb überhaupt keine weitere tabellendefinition enthalten, ausserdem enthält diese ebenfalls einen syntax-fehler, weil das table-tag nicht geschlossen ist.
                      2. in den th-zellen ist bei toggle ein syntaxfehler, glaub ein anführungsstrich zu viel
                      3. warum verwendest du bei den td-zellen nicht die gleichen breiten klassen wie für die th's? mythclass0 ... so können sich durch abweichungen schnell fehler einschleichen
                      4. das separate font-element innderhalb mancher td's würde ich entweder durch eine eigene css-klasse für die td's ergänzen tauschen
                      5. für die breitenangaben der spalten und der tabelle würde ich nur mit prozent arbeiten. sonst hast du eine weitere fehlerquelle, wenn die summe der spaltenpixel die breite der tabelle überschreitet
                      6. mit der generellen css angabe box-sizing: border-box; habe ich gute erfahrungen gemacht, da ansonsten die border immer noch auf die breite oben drauf gezählt wird (siehe dann dazu auch 5.) allerdings verwedne ich meisst nur div tabellen
                      7. das letzte problem ist, das durch den scrollbar die breite von thead und tbody von einander abweichen, table,td,th haben so einen größenberechnungsautomatismus.

                      ich würde dir raten, das mit div elemente zu machen
                      du kannst eom besipiel hier anschauen
                      https://css-tricks.com/position-sticky-and-table-headers/

                      liv-in-skyL Offline
                      liv-in-skyL Offline
                      liv-in-sky
                      schrieb am zuletzt editiert von liv-in-sky
                      #10

                      @oliverio

                      nochmal vielen dank - das mit dem div-tabellen habe ich nicht gemacht - der eingriff war mir zuviel zum umschreiben

                      bin jetzt ganz zufrieden mit der tabelle

                      AApossis (16).gif

                      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 Antwort Letzte Antwort
                      2
                      • OliverIOO OliverIO

                        @liv-in-sky

                        puh, da sind einige baustellen.
                        du solltest den erzeugten html code mal in einen syntax-prüfer stecken oder bei jsfiddle mal reinkopieren. da sind einige fehler drin.

                        1. der äußere table sollte evtl ein div sein. dazu ist innerhalb überhaupt keine weitere tabellendefinition enthalten, ausserdem enthält diese ebenfalls einen syntax-fehler, weil das table-tag nicht geschlossen ist.
                        2. in den th-zellen ist bei toggle ein syntaxfehler, glaub ein anführungsstrich zu viel
                        3. warum verwendest du bei den td-zellen nicht die gleichen breiten klassen wie für die th's? mythclass0 ... so können sich durch abweichungen schnell fehler einschleichen
                        4. das separate font-element innderhalb mancher td's würde ich entweder durch eine eigene css-klasse für die td's ergänzen tauschen
                        5. für die breitenangaben der spalten und der tabelle würde ich nur mit prozent arbeiten. sonst hast du eine weitere fehlerquelle, wenn die summe der spaltenpixel die breite der tabelle überschreitet
                        6. mit der generellen css angabe box-sizing: border-box; habe ich gute erfahrungen gemacht, da ansonsten die border immer noch auf die breite oben drauf gezählt wird (siehe dann dazu auch 5.) allerdings verwedne ich meisst nur div tabellen
                        7. das letzte problem ist, das durch den scrollbar die breite von thead und tbody von einander abweichen, table,td,th haben so einen größenberechnungsautomatismus.

                        ich würde dir raten, das mit div elemente zu machen
                        du kannst eom besipiel hier anschauen
                        https://css-tricks.com/position-sticky-and-table-headers/

                        liv-in-skyL Offline
                        liv-in-skyL Offline
                        liv-in-sky
                        schrieb am zuletzt editiert von
                        #11

                        @oliverio ich hätte da noch eine theoretische frge:

                        wenn ich eigen-benannte classes benutze und in einer view 2 solche tabellen haben, die dann beide die selben class-namen haben, wird das ein problem. anders: ist die gültigkeit dieser klaeen auf das widget begrenzt ?

                        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

                        OliverIOO 1 Antwort Letzte Antwort
                        0
                        • liv-in-skyL liv-in-sky

                          @oliverio ich hätte da noch eine theoretische frge:

                          wenn ich eigen-benannte classes benutze und in einer view 2 solche tabellen haben, die dann beide die selben class-namen haben, wird das ein problem. anders: ist die gültigkeit dieser klaeen auf das widget begrenzt ?

                          OliverIOO Offline
                          OliverIOO Offline
                          OliverIO
                          schrieb am zuletzt editiert von
                          #12

                          @liv-in-sky said in suche hilfe bei tabelle mit scroll im tbody:

                          @oliverio ich hätte da noch eine theoretische frge:

                          wenn ich eigen-benannte classes benutze und in einer view 2 solche tabellen haben, die dann beide die selben class-namen haben, wird das ein problem. anders: ist die gültigkeit dieser klaeen auf das widget begrenzt ?

                          die CSS-Namen im html-element selbst haben erst einmal keine Auswirkungen.
                          erst mit einer css-Definition wird die Formatierung auf das Element angewendet, die mit der Klasse benannt ist.
                          Du kannst auch mehrere CSS-Klassen für ein Element zuordnen.
                          Die Formatierungsanweisungen aus den verschiedenen Klassen werden dann kombiniert.
                          Es macht durchaus Sinn, eine Klasse für mehrere elemente zu verwenden, sofern die selbe Formatierung darauf angewendet werden soll.

                          Nur die ID eines Elements muss(sollte) eindeutig sein. Führt zwar zu keinem Fehler, aber ansteuern kannst du die dann nicht über den Namen oder es gibt seltsame effekte.
                          Ich selbst verwende selten IDs, sondern nur gut benamte CSS-Bezeichnungen

                          Beispiel

                          https://jsfiddle.net/oweitman/nmhsc519/1/

                          Meine Adapter und Widgets
                          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                          Links im Profil

                          liv-in-skyL 1 Antwort Letzte Antwort
                          0
                          • OliverIOO OliverIO

                            @liv-in-sky said in suche hilfe bei tabelle mit scroll im tbody:

                            @oliverio ich hätte da noch eine theoretische frge:

                            wenn ich eigen-benannte classes benutze und in einer view 2 solche tabellen haben, die dann beide die selben class-namen haben, wird das ein problem. anders: ist die gültigkeit dieser klaeen auf das widget begrenzt ?

                            die CSS-Namen im html-element selbst haben erst einmal keine Auswirkungen.
                            erst mit einer css-Definition wird die Formatierung auf das Element angewendet, die mit der Klasse benannt ist.
                            Du kannst auch mehrere CSS-Klassen für ein Element zuordnen.
                            Die Formatierungsanweisungen aus den verschiedenen Klassen werden dann kombiniert.
                            Es macht durchaus Sinn, eine Klasse für mehrere elemente zu verwenden, sofern die selbe Formatierung darauf angewendet werden soll.

                            Nur die ID eines Elements muss(sollte) eindeutig sein. Führt zwar zu keinem Fehler, aber ansteuern kannst du die dann nicht über den Namen oder es gibt seltsame effekte.
                            Ich selbst verwende selten IDs, sondern nur gut benamte CSS-Bezeichnungen

                            Beispiel

                            https://jsfiddle.net/oweitman/nmhsc519/1/

                            liv-in-skyL Offline
                            liv-in-skyL Offline
                            liv-in-sky
                            schrieb am zuletzt editiert von liv-in-sky
                            #13

                            @oliverio das kam wohl nicht richtig rüber von mir:

                            ich meinte, wenn ich meine tabellen über ein binding in einem html standardwidget anzeige, sind die klassen darin defininiert, weil sie ja über mein script im html code stehen

                            meine frage ist: was passiert, wenn ich noch eine andere tabelle in einem widget habe und darin sind die selben klassennamen aber evtl andere inhalte. dann ist in einer view in 2 widgets jeweils eine klasse mir dem selben namen aber unterschiedlichen inhalten

                            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

                            OliverIOO 1 Antwort Letzte Antwort
                            0
                            • liv-in-skyL liv-in-sky

                              @oliverio das kam wohl nicht richtig rüber von mir:

                              ich meinte, wenn ich meine tabellen über ein binding in einem html standardwidget anzeige, sind die klassen darin defininiert, weil sie ja über mein script im html code stehen

                              meine frage ist: was passiert, wenn ich noch eine andere tabelle in einem widget habe und darin sind die selben klassennamen aber evtl andere inhalte. dann ist in einer view in 2 widgets jeweils eine klasse mir dem selben namen aber unterschiedlichen inhalten

                              OliverIOO Offline
                              OliverIOO Offline
                              OliverIO
                              schrieb am zuletzt editiert von
                              #14

                              @liv-in-sky said in suche hilfe bei tabelle mit scroll im tbody:

                              @oliverio das kam wohl nicht richtig rüber von mir:

                              ich meinte, wenn ich meine tabellen über ein binding in einem html standardwidget anzeige, sind die klassen darin defininiert, weil sie ja über mein script im html code stehen

                              meine frage ist: was passiert, wenn ich noch eine andere tabelle in einem widget habe und darin sind die selben klassennamen aber evtl andere inhalte. dann ist in einer view in 2 widgets jeweils eine klasse mir dem selben namen aber unterschiedlichen inhalten

                              ja, da musst du aufpassen. daher am besten um die elemente deines scripts ein div machen mit einem eindeutigen css-name und dann alle css-klassen so adressieren.
                              die css-klassen die du definierst wirken nämlich im gesamten html dokument

                              lies dir auch mal den artikel durch. da steht beschrieben, in welchen kombinationen und verschachtelungen css-klassen adressiert werden kann.
                              bei problemen kannst mich auch gerne fragen

                              <style>
                              .mein_script_container_mit_hoffentlich_eindeutigem_namen .tabelle1 {
                                  color: red;
                              }
                              .mein_script_container_mit_hoffentlich_eindeutigem_namen .tabelle2 {
                                  color: green;
                              }
                              </style>
                              <div class="mein_script_container_mit_hoffentlich_eindeutigem_namen">
                                  <div class="tabelle1"></div>
                                  <div class="tabelle2"></div>
                              </div>
                              

                              Meine Adapter und Widgets
                              TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                              Links im Profil

                              liv-in-skyL 1 Antwort Letzte Antwort
                              0
                              • OliverIOO OliverIO

                                @liv-in-sky said in suche hilfe bei tabelle mit scroll im tbody:

                                @oliverio das kam wohl nicht richtig rüber von mir:

                                ich meinte, wenn ich meine tabellen über ein binding in einem html standardwidget anzeige, sind die klassen darin defininiert, weil sie ja über mein script im html code stehen

                                meine frage ist: was passiert, wenn ich noch eine andere tabelle in einem widget habe und darin sind die selben klassennamen aber evtl andere inhalte. dann ist in einer view in 2 widgets jeweils eine klasse mir dem selben namen aber unterschiedlichen inhalten

                                ja, da musst du aufpassen. daher am besten um die elemente deines scripts ein div machen mit einem eindeutigen css-name und dann alle css-klassen so adressieren.
                                die css-klassen die du definierst wirken nämlich im gesamten html dokument

                                lies dir auch mal den artikel durch. da steht beschrieben, in welchen kombinationen und verschachtelungen css-klassen adressiert werden kann.
                                bei problemen kannst mich auch gerne fragen

                                <style>
                                .mein_script_container_mit_hoffentlich_eindeutigem_namen .tabelle1 {
                                    color: red;
                                }
                                .mein_script_container_mit_hoffentlich_eindeutigem_namen .tabelle2 {
                                    color: green;
                                }
                                </style>
                                <div class="mein_script_container_mit_hoffentlich_eindeutigem_namen">
                                    <div class="tabelle1"></div>
                                    <div class="tabelle2"></div>
                                </div>
                                
                                liv-in-skyL Offline
                                liv-in-skyL Offline
                                liv-in-sky
                                schrieb am zuletzt editiert von
                                #15

                                @oliverio ok - danke - ds dachte ich mir schon - daher werd ich wohl an alle klassennamen einen eindeutigen namen anhängen. in der definition des scriptes muss ein eindeutiger name definiert werden, sonst überschreiben sich die datenpunkte der tabellen - diese werde ich dann nutzen und den einfach anhängen - somit können keine doppelten klassennamen vorkommen

                                das mit den id's wird in den html checker auch sofort angemeckert - "doppelte id ..." - daher nehme ich auch klassen

                                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

                                OliverIOO 1 Antwort Letzte Antwort
                                0
                                • liv-in-skyL liv-in-sky

                                  @oliverio ok - danke - ds dachte ich mir schon - daher werd ich wohl an alle klassennamen einen eindeutigen namen anhängen. in der definition des scriptes muss ein eindeutiger name definiert werden, sonst überschreiben sich die datenpunkte der tabellen - diese werde ich dann nutzen und den einfach anhängen - somit können keine doppelten klassennamen vorkommen

                                  das mit den id's wird in den html checker auch sofort angemeckert - "doppelte id ..." - daher nehme ich auch klassen

                                  OliverIOO Offline
                                  OliverIOO Offline
                                  OliverIO
                                  schrieb am zuletzt editiert von
                                  #16

                                  @liv-in-sky

                                  nicht anhängen, nur davor schreiben

                                  die folgende definition bedeutet, das alle elemente mit dem klassen namen css2, welche sich innerhalb eines anderen elements mit klassennamen css1 befindet die schrift rot gefärbt wird.
                                  dabei muss das element mit css1 nicht direkt darüber sein, sondern kann auch mehrere ebenen in der hierarchie darüber sein.

                                  .css1 .css2 {
                                      color: red;
                                  }
                                  

                                  wie gesagt, lesen den artikel, da steht das drin, auf deutsch, mit beispiele
                                  und am besten in jsfiddle ein bisschen zum verständnis mit rumspielen

                                  Meine Adapter und Widgets
                                  TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                                  Links im Profil

                                  liv-in-skyL 1 Antwort Letzte Antwort
                                  0
                                  • OliverIOO OliverIO

                                    @liv-in-sky

                                    nicht anhängen, nur davor schreiben

                                    die folgende definition bedeutet, das alle elemente mit dem klassen namen css2, welche sich innerhalb eines anderen elements mit klassennamen css1 befindet die schrift rot gefärbt wird.
                                    dabei muss das element mit css1 nicht direkt darüber sein, sondern kann auch mehrere ebenen in der hierarchie darüber sein.

                                    .css1 .css2 {
                                        color: red;
                                    }
                                    

                                    wie gesagt, lesen den artikel, da steht das drin, auf deutsch, mit beispiele
                                    und am besten in jsfiddle ein bisschen zum verständnis mit rumspielen

                                    liv-in-skyL Offline
                                    liv-in-skyL Offline
                                    liv-in-sky
                                    schrieb am zuletzt editiert von
                                    #17

                                    @oliverio ich hab edich schon verstanden -werde aber trotzdem nochmal dieses aneinaderhängen durchlesen

                                    aber wenn du ein html über ein script erzeugst, hat man ja die möglichkeit einfach eine anderen texteil anzuhängen

                                    let dpVIS="definierterEinmaligerName" //damit werden datenpunkte erzeugt
                                    <style> .myclass+"dpVIS" { height: 13px}..............</style>
                                    

                                    fühl ich mich wohler dabei und kommt aufs selbe ergebnis - keine doppelten class.namen

                                    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

                                    OliverIOO 1 Antwort Letzte Antwort
                                    0
                                    • liv-in-skyL liv-in-sky

                                      @oliverio ich hab edich schon verstanden -werde aber trotzdem nochmal dieses aneinaderhängen durchlesen

                                      aber wenn du ein html über ein script erzeugst, hat man ja die möglichkeit einfach eine anderen texteil anzuhängen

                                      let dpVIS="definierterEinmaligerName" //damit werden datenpunkte erzeugt
                                      <style> .myclass+"dpVIS" { height: 13px}..............</style>
                                      

                                      fühl ich mich wohler dabei und kommt aufs selbe ergebnis - keine doppelten class.namen

                                      OliverIOO Offline
                                      OliverIOO Offline
                                      OliverIO
                                      schrieb am zuletzt editiert von
                                      #18

                                      @liv-in-sky said in suche hilfe bei tabelle mit scroll im tbody:

                                      @oliverio ich hab edich schon verstanden -werde aber trotzdem nochmal dieses aneinaderhängen durchlesen

                                      aber wenn du ein html über ein script erzeugst, hat man ja die möglichkeit einfach eine anderen texteil anzuhängen

                                      let dpVIS="definierterEinmaligerName" //damit werden datenpunkte erzeugt
                                      <style> .myclass+"dpVIS" { height: 13px}..............</style>
                                      

                                      fühl ich mich wohler dabei und kommt aufs selbe ergebnis - keine doppelten class.namen

                                      macht aber ein paar dinge komplizierter und du wirst mehr css-klassen definieren müssen

                                      Meine Adapter und Widgets
                                      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                                      Links im Profil

                                      liv-in-skyL 3 Antworten Letzte Antwort
                                      0
                                      • OliverIOO OliverIO

                                        @liv-in-sky said in suche hilfe bei tabelle mit scroll im tbody:

                                        @oliverio ich hab edich schon verstanden -werde aber trotzdem nochmal dieses aneinaderhängen durchlesen

                                        aber wenn du ein html über ein script erzeugst, hat man ja die möglichkeit einfach eine anderen texteil anzuhängen

                                        let dpVIS="definierterEinmaligerName" //damit werden datenpunkte erzeugt
                                        <style> .myclass+"dpVIS" { height: 13px}..............</style>
                                        

                                        fühl ich mich wohler dabei und kommt aufs selbe ergebnis - keine doppelten class.namen

                                        macht aber ein paar dinge komplizierter und du wirst mehr css-klassen definieren müssen

                                        liv-in-skyL Offline
                                        liv-in-skyL Offline
                                        liv-in-sky
                                        schrieb am zuletzt editiert von
                                        #19

                                        @oliverio bin noch am überlegen - hab gerade wenig zeit - werd das auf jeden fall in erinnerung halten - du hast da def. mehr erfahrung

                                        nebenbei entdecke ich gerade jquery - ist echt cool, was da geht

                                        z.b.eine

                                        AApossis (18).gif suche

                                        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 Antwort Letzte Antwort
                                        0
                                        • OliverIOO OliverIO

                                          @liv-in-sky said in suche hilfe bei tabelle mit scroll im tbody:

                                          @oliverio ich hab edich schon verstanden -werde aber trotzdem nochmal dieses aneinaderhängen durchlesen

                                          aber wenn du ein html über ein script erzeugst, hat man ja die möglichkeit einfach eine anderen texteil anzuhängen

                                          let dpVIS="definierterEinmaligerName" //damit werden datenpunkte erzeugt
                                          <style> .myclass+"dpVIS" { height: 13px}..............</style>
                                          

                                          fühl ich mich wohler dabei und kommt aufs selbe ergebnis - keine doppelten class.namen

                                          macht aber ein paar dinge komplizierter und du wirst mehr css-klassen definieren müssen

                                          liv-in-skyL Offline
                                          liv-in-skyL Offline
                                          liv-in-sky
                                          schrieb am zuletzt editiert von
                                          #20

                                          @oliverio

                                          ich schon wieder - jetzt passiert das, was ich erwähnt hatte - ich ändere in der tabelle etwas - und die anderen widgets reagieren - sieht cool aus - ist aber doof

                                          das ist eine test-view - daher so durcheinander- wenn ich in der searchbox etwas eingebe - reagieren rechts oben in der ecke und das große orange (material design)

                                          AApossis (19).gif

                                          passiert durch jquery

                                          var allRows = $("[class*='gerade${dpVIS}']");console.log(allRows);  $("input#search").on("keydown keyup", function() {  allRows.hide();  $("tr:contains('" + $(this).val() + "')").show();});`
                                          
                                          

                                          hier die console und html code:

                                          Image 13.png
                                          Image 14.png

                                          ich weiß nicht, warum die reagieren - hast du eine idee

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

                                          695

                                          Online

                                          32.6k

                                          Benutzer

                                          82.2k

                                          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