Weihnachtsangebot 2025! 🎄

[adsfa]

Hi zusammen,
ich würde gerne die die aus dem Countdown Adapter bereitgestellte html Tabelle nach der dritten Spalte (Number) sortieren und eine Überschrift hinzufügen.
Datenpunkt aus dem Adapter mit der Tabelle:
countdown.0.htmlContent
Das Ergebnis soll in diesen Datenpunkt geschrieben werden, wenn sich der Adapter Datenpunkt aktualisiert:
0_userdata.0.VIS.Tabellen.Countdown_Tabelle

<table>
   <tbody>
      <tr>
         <td class="string">Test Geburtstag</td>
         <td class="string"> 5M 18T</td>
         <td class="number">171</td>
         <td class="number">24</td>
         <td class="string">12.07.2023 09:00</td>
      </tr>
      <tr>
         <td class="string">test2</td>
         <td class="string"> 3T 19S 36M</td>
         <td class="number">3</td>
         <td class="number">0</td>
         <td class="string">25.01.2023 09:00</td>
      </tr>
      <tr>
         <td class="string">Test3</td>
         <td class="string"> 6T 19S 36M</td>
         <td class="number">6</td>
         <td class="number">0</td>
         <td class="string">28.01.2023 09:00</td>
      </tr>
      <tr>
   </tbody>
</table>

Ich würde gerne diese Überschriften hinzufügen:

       <tr>
         <td class="string"><b>EVENT</b></td>
         <td class="string"><b>M+T</b></td>
         <td class="number"><b>TAGE</b></td>
         <td class="number"><b>WOCHEN</b></td>
         <td class="string"><b>DATUM</b></td> 
      </tr>

Mit diesem Skript klappt es in HTLM jedoch weiß ich nicht, wie ich das in iobroker anstelle.

<script>
function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[2];
      y = rows[i + 1].getElementsByTagName("TD")[2];
      //check if the two rows should switch place:
      if (Number(x.innerHTML) > Number(y.innerHTML)) {
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

</script>

[Codierknecht]

@adsfa sagte in Countdown Adapter html Table sortieren:

Mit diesem Skript klappt es in HTLM jedoch weiß ich nicht, wie ich das in iobroker anstelle.

Das ist kein HTML, sondern JavaScript.
Kannst Du das nicht in den JS-Bereich der Vis einfügen?

[adsfa]

@codierknecht Ich nutze Lovelace für die Darstellung. Ich glaube da gibt es sowas nicht, somit muss die Tabelle via JS vorher editiert werden und dann im Datenpunkt gespeichert.

[Codierknecht]

@adsfa sagte in Countdown Adapter html Table sortieren:

Ich nutze Lovelace für die Darstellung

Wäre durchaus erwähnenswert gewesen :face_with_rolling_eyes:

[adsfa]

@codierknecht Sorry ich wusste nicht, dass man das in anderen Tools anders lösen kann.
Soweit ich es verstehe, wird bei Lovelace die Html tabelle als Datenpunkt dargestellt und alle Anpassungen müssen über JS im vorhinein erledigt werden.