Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS mit Javascript auf Tabelle anwenden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS mit Javascript auf Tabelle anwenden

    Hallo,

    ich erstelle dynamisch eine Tabelle und möchte gern per Button Click die komplette letzte Spalte samt Überschrift ein- und ausblenden.

    Wenn ich folgenden Code direkt ins CSS eingebe funktionniert es :

    Code:
    table th:last-of-type, tr > td:last-of-type {
        display: none;
    }
    Wenn ich diesen CSS-Selektor jedoch in meinen Javascript Code eingebe wir nur die Überschrift (also das th element) ausgbelendet jedoch nicht die darunterliegenden td Elemente.


    Code:
    document.querySelector("table th:last-of-type, tr > td:last-of-type").style.display = "none";
    Habs auch schon mit querySelectorAll probiert.







  • #2
    Du wirst querySelectorAll() brauchen.

    Kommentar


    • #3
      Habs rausgefunden : die Anweisung in der puren CSS Datei wendet sich direkt auf alle selektierten Elemente aus wo hingegen per Javascript ein Knoten
      erstellt wird wo ich per Schleife jedes Element ansprechen muss um diesem die CSS Anweisung zuzuweisen :

      const lastColumn = document.querySelectorAll("table th:last-of-type, tr > td:last-of-type");
      lastColumn.forEach(function(row) {row.style.display="none"});

      Kommentar


      • #4
        Nur mal so als Denkanstoß...

        HTML-Code:
        <!DOCTYPE html>
        <html lang=de>
          <meta charset=UTF-8>
          <style>
            table.hide-last-column tr>*:last-child{
              display:none;
            }
          </style>
          <title>Table Test</title>
          <h1>Tabelle</h1>
          <table id=myTable>
            <thead>
              <tr><th>Column 1<th>Column 2<th>Column 3
            <tbody>
              <tr><td>Content 1<td>Content 2<td>Content 3</tr>
          </table>
          <button id=showHide>show/hide last Column</button>
          <script>
            showHide.addEventListener('click', () =>
              myTable.classList.toggle('hide-last-column')
            )
          </script>

        Kommentar

        Lädt...
        X