JavaScript

JavaScript (JS) ist eine dynamisch typisierte Programmiersprache (Skriptsprache), die von Netscape für dynamisches HTML in Webbrowsern entwickelt wurde. Der Sprachkern ist als ECMAScript standardisiert. JavaScript ermöglicht vor allem clientseitige Manipulation des HTML DOMs, wird aber immer mehr auch außerhalb des Browsers benutzt (wie z.B. in Node oder Deno, Laufzeitumgebungen für Java- bzw. TypeScript). JavaScript ist zusammen mit HTML und CSS eine der Kernsprachen des World Wide Webs (WWW).

Beispielprogramme

table auto full colspan

Dieses Programm setzt automatisch (nachdem das DOM geladen ist) die Spannbreite (colspan) jeder Tabellenzelle, welche die definierte Klasse (hier ".colspan-full") hat, auf den richtigen Wert, damit die Zelle die Breite der vollen Tabelle einnimmt. Diese Funktion wird von HTML 5 leider noch nicht unterstützt.

"use strict";
window.addEventListener("DOMContentLoaded", () => {
    let class = ".colspan-full";
    let span = document.querySelectorAll(class);
    for (let e of span) {
        let table = e.parentElement;
        while (table.tagName.toLowerCase() !== "table") {
            table = table.parentElement;
        }
 
        if (table !== undefined) {
            let columnCount = table
                .querySelector("thead")
                .querySelector("tr")
                .querySelectorAll("th, td").length;
            e.setAttribute("colspan", columnCount);
        } else {
            console.warn("couldn't find the table!");
        }
    }
});

Beispiel:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./styles.css">
        <title></title>
    </head>
    <body>
        <table id="test" aria-label="example table">
            <thead>
                <tr>
                    <th scope="col">1</th>
                    <th scope="col">2</th>
                    <th scope="col">3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td class="colspan-full">span</td>
                </tr>
            </tfoot>
        </table>
 
        <script type="module" src="./scripts.js"></script>
    </body>
</html>

styles.css

#test {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid black;
}
 
#test th,
#test td {
    text-align: left;
    border: 1px solid black;
    padding: 0.5rem;
}
 
.colspan-full {
    text-align: center !important;
}

scripts.js

"use strict";
window.addEventListener("DOMContentLoaded", () => {
    let className = "colspan-full";
    let span = document.querySelectorAll(`.${className}`);
    for (let e of span) {
        let table = e.parentElement;
        while (table.tagName.toLowerCase() !== "table") {
            table = table.parentElement;
        }
 
        if (table !== undefined) {
            let columnCount = table
                .querySelector("thead")
                .querySelector("tr")
                .querySelectorAll("th, td").length;
            e.setAttribute("colspan", columnCount);
        } else {
            console.warn("couldn't find the table!");
        }
    }
});