【js 编程艺术】小制作四

1. html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cities</title>
    <link rel="stylesheet" type="text/css" href="styles/format.css">
</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>
    <script type="text/javascript" src="scripts/addLoadEvent.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>
</body>
</html>

2.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;
}

/*tr:nth-child(odd){
    background-color: #ccc;
}
tr:nth-child(even){
    background-color: #fff;
}*/

.odd{
    background-color: #ffc;
}

3.js

/* addLoadEvent.js*/
function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != "function"){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

/* stripeTables.js*/

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

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

// window.onload = stripeTables;
addLoadEvent(stripeTables);

/* dispalyAbbreviations.js*/

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

function dispalyAbbreviations() {

    //检查兼容性
    if(!document.getElementsByTagName) return false;
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;

    //取得所有缩略词
    var dlist = document.createElement("dl");
    var abbreviations = document.getElementsByTagName("abbr");
    if (abbreviations.length < 1) return false;
    var defs = new Array();

    //遍历缩略词
    for (var i = 0; i < abbreviations.length; i++) {
        var current_abbr = abbreviations[i];

        //ie6及更早不支持abbr元素,但是添加if语句不显示
        // if(current_abbr.chileNodes.length < 1) continue;
        var definition = current_abbr.getAttribute("title");
        var key = current_abbr.lastChild.nodeValue;
        defs[key] = definition;
    }

    //创建定义列表
    var dlist = document.createElement("dl");

    //遍历定义
    for(key in defs){
        var definition = defs[key];

        //创建定义标题
        var dtitle =  document.createElement("dt");
        var dtitle_text = document.createTextNode(key);
        dtitle.appendChild(dtitle_text);

        //创建定义描述
        var ddesc = document.createElement("dd");
        var ddesc_text = document.createTextNode(definition);
        ddesc.appendChild(ddesc_text);

        //将定义标题和定义描述添加到定义列表里
        dlist.appendChild(dtitle);
        dlist.appendChild(ddesc);
    }

    // if(dlist.chileNodes.length < 1) return false;

    //创建标题
    var header = document.createElement("h2");
    var header_text = document.createTextNode("Abbreviations");
    header.appendChild(header_text);

    //把标题添加到页面主体
    document.body.appendChild(header);
    document.body.appendChild(dlist);
}

function displayCitations(){

    //检查兼容性
    if(!document.getElementsByTagName) return false;
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;

    //取得所有引用
    var quotes = document.getElementsByTagName("blockquote");

    //遍历所有引用
    for(var i = 0; i < quotes.length; i++){
        if(!quotes[i].getAttribute("cite")) continue;
        var url = quotes[i].getAttribute("cite");
        var quoteChildren = quotes[i].getElementsByTagName("*");
        if(quoteChildren.length < 1) continue;
        var elem = quoteChildren[quoteChildren.length - 1];

        //创建标记
        var link = document.createElement("a");
        var link_text = document.createTextNode("source");
        link.appendChild(link_text);
        link.setAttribute("href", url);
        var superscript = document.createElement("sup");
        superscript.appendChild(link);

        //把标记添加到引用中的最后一个元素节点
        elem.appendChild(superscript);
    }
}

function displayAccessKeys(){

    //检查兼容性
    if(!document.getElementsByTagName) return false;
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;

    var links = document.getElementsByTagName("a");

    var akeys = new Array();

    //遍历数组
    for(var i = 0; i < links.length; i++){
        var current_link = links[i];
        if(!current_link.getAttribute("accesskey")) continue;
        var key = current_link.getAttribute("accesskey");
        var text = current_link.lastChild.nodeValue;
        akeys[key] = text;
    }

    //创建列表
    var list = document.createElement("ul");

    for(key in akeys){
        var text = akeys[key];
        var str = key + ": " + text;
        var item = document.createElement("li");
        var item_text = document.createTextNode(str);
        item.appendChild(item_text);
        list.appendChild(item);
    }

    //创建标题
    var header = document.createElement("h3");
    var header_text = document.createTextNode("Accesskeys");
    header.appendChild(header_text);
    document.body.appendChild(list);
}

addLoadEvent(dispalyAbbreviations);
addLoadEvent(displayCitations);
addLoadEvent(displayAccessKeys);

/* 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);