DOM Scripting 学习十-itinerary_dom scripting原文-CSDN博客

本文链接：https://blog.csdn.net/Darcyyyy/article/details/126116013

itinerary.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Cities</title>
    <link rel="stylesheet" type="text/css" media="screen" href="styles/format.css" />
    <script type="text/javascript" src="scripts/addLoadEvent.js">
    </script>
    <script type="text/javascript" src="scripts/addClass.js">
    </script>
    <script type="text/javascript" src="scripts/stripeTables.js">
    </script>
    <script type="text/javascript" src="scripts/displayAbbreviations.js">
    </script>
    <script type="text/javascript" src="scripts/highlightRows.js">
    </script>
</head>

<body>
    <table>
        <caption>Itinerary</caption>
        <thead>
            <tr>
                <th>When</th>
                <th>Where</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>June 9th</td>
                <td>Portland, <abbr title="Oregon">OR</abbr></td>
            </tr>
            <tr>
                <td>June 10th</td>
                <td>Seattle, <abbr title="Washington">WA</abbr></td>
            </tr>
            <tr>
                <td>June 12th</td>
                <td>Sacramento, <abbr title="California">CA</abbr></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

scripts/addClass.js

function addClass(element, value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}

scripts/addLoadEvent.js

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}

scripts/displayAbbreviations.js

function displayAbbreviations() {
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    //get all the abbreviations
    var abbreviations = document.getElementsByTagName("abbr");
    if (abbreviations.length < 1) return false;
    var defs = new Array();
    //loop through the abbreviations
    for (var i = 0; i < abbreviations.length; i++) {
        var current_abbr = abbreviations[i];
        if (current_abbr.childNodes.length < 1) continue;
        var definition = current_abbr.getAttribute("title");
        var key = current_abbr.lastChild.nodeValue;
        defs[key] = definition;
    }
    //create the definition list
    var dlist = document.createElement("dl");
    //loop through the definitions
    for (key in defs) {
        var definition = defs[key];
        //create the definition title
        var dtitle = document.createElement("dt");
        var dtitle_text = document.createTextNode(key);
        dtitle.appendChild(dtitle_text);
        //create the definition decription
        var ddesc = document.createElement("dd");
        var ddesc_text = document.createTextNode(definition);
        ddesc.appendChild(ddesc_text);
        //add them to the definition list
        dlist.appendChild(dtitle);
        dlist.appendChild(ddesc);
    }
    if (dlist.childNodes.length < 1) return false;
    //create a headline
    var header = document.createElement("h2");
    var header_text = document.createTextNode("Abbreviations");
    header.appendChild(header_text);
    //add the headline to the body
    document.body.appendChild(header);
    //add the definition list to the body
    document.body.appendChild(dlist);
}

addLoadEvent(displayAbbreviations);

scripts/highlightRows.js

function highlightRows() {
    if (!document.getElementsByTagName) return false;
    var rows = document.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].onmouseover = function () {
            this.style.fontWeight = "bold";
        }
        rows[i].onmouseout = function () {
            this.style.fontWeight = "normal";
        }
    }
}
addLoadEvent(highlightRows);

scripts/stripeTables.js

function stripeTables() {
    if (!document.getElementsByTagName) return false;
    var tables = document.getElementsByTagName("table");
    for (var i = 0; i < tables.length; i++) {
        var odd = false;
        var rows = tables[i].getElementsByTagName("tr");
        for (var j = 0; j < rows.length; j++) {
            if (odd == true) {
                //rows[j].style.backgroundColor = "#ffc";
                addClass(rows[j], "odd");

                odd = false;
            } else {
                odd = true;
            }
        }
    }
}
addLoadEvent(stripeTables);

styles/format.css

body {
    font-family: "Helvetica", "Arial", sans-serif;
    background-color: #fff;
    color: #000;
}

table {
    margin: auto;
    border: 1px solid #699;
}

caption {
    margin: auto;
    padding: .2em;
    font-size: 1.2em;
    font-weight: bold;
}

th {
    font-weight: normal;
    font-style: italic;
    text-align: left;
    border: 1px dotted #699;
    background-color: #9cc;
    color: #000;
}

th,
td {
    width: 10em;
    padding: .5em;
}

.odd {
    background-color: #ffc;
}