首页 > 代码库 > JavaScript网站设计实践(六)编写live.html页面 改进表格显示

JavaScript网站设计实践(六)编写live.html页面 改进表格显示

一、编写live.html页面,1、JavaScript实现表格的隔行换色,并且当鼠标移过时当前行高亮显示;2、是输出表格中的abbr标签的内容

实现后的效果图是这样的:

1、实现思路

在输出表格的时候,给出一个判断,如果偶数或是奇数行我们想换色,则添加一个class为odd的值,在这个class里就设置了表格不同颜色tr行。

这里用到了一个判断函数:(下面是两个不同的方法,任选其一)

法一: //隔行换色  添加class属性
    for(var i =0; i<tables.length; i++){
        var odd = false;
        var rows = tables[i].getElementsByTagName("tr");         //获取表格里的函数rows
        for(var j=0; j<rows.length; j++){
            if(odd == true){                                     
                addClass(rows[j],"odd");
                odd = false;

            }else{
                odd = true;
            }
        }
    }

 

 

法二: for(var i =0; i<tables.length; i++){
        var rows = tables[i].getElementsByTagName("tr");         //获取表格里的函数rows
        for(var j=0; j<rows.length; j++){
            if(j%2 == 0){
                addClass(rows[j],"odd");                         //偶数行时,添加class为odd的值
            }
        }
    }

 

法一中,是使用一个odd标识来实现隔行换色,刚开始设置odd表示为false,然后进入循环后,判断,如果odd是true则添加class为odd的值,否则则设置为true,这样在第二次循环时,读到的便是odd=true,读到是true后,又设置为false,这样在下次读取又是false,就不设置class =odd,就达到了隔行设置class=odd,实现隔行换色。

法二中,更直接。判断第二次循环的参数j,与2取模后,结果是否0来确定是否添加class = odd。

2、代码

(1)首先,把template.html中的代码拷贝到live.html中,将div 的id为content的部分,写入如下:

<h1> Tour dates</h1>
            <table summary="when and where you can see the band">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>City</th>
                        <th>Venue</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>June 9th</td>
                        <td>Portland,<abbr title="Oregon">OR</abbr></td>
                        <td>Crystal Ballroom</td>
                    </tr>
                    <tr>
                        <td>June 9th</td>
                        <td>Portland,<abbr title="Washington">WA</abbr></td>
                        <td>Crystal Ballroom</td>
                    </tr>
                    <tr>
                        <td>June 9th</td>
                        <td>Portland,<abbr title="California">CA</abbr></td>
                        <td>Crystal Ballroom</td>
                    </tr>
                    <tr>
                        <td>June 9th</td>
                        <td>Portland,<abbr title="Texas">TX</abbr></td>
                        <td>Crystal Ballroom</td>
                    </tr>
                    
                </tbody>
            </table>

 

(2)然后,修改webdesign.css、color.css、typography.css文件

td{
    padding: .5em 3em;
}

/**********live.html*************************/
dl{
    overflow: hidden;
}
dt{
    float: left;
}
dd{
    float: left;
}

 

 

tr.odd td{
    color: #233;
    background-color: #ec8;
}
tr.highlight td{
    color: #223;
    background-color: #cba;
}

 

 

 

 

dt{
    margin-right: 1em;
}
dd{
    margin-right: 3em;
}

 

 

 

 

(3)最后,创建live.js文件,来为页面编写JavaScript效果

/*******************给表格的偶数行添加样式*********************/
function stripeTables(){
    //旧浏览器对象检测
    if(!document.getElementsByTagName) return false;
    
    //获取元素
    var tables = document.getElementsByTagName("table");
    
    //隔行换色  添加class属性
    for(var i =0; i<tables.length; i++){
        var odd = false;
        var rows = tables[i].getElementsByTagName("tr");         //获取表格里的函数rows
        for(var j=0; j<rows.length; j++){
            if(odd == true){                                     
                alert(odd);
                addClass(rows[j],"odd");
                odd = false;
            }else{
                odd = true;
            }
        }
    }
    
    /*for(var i =0; i<tables.length; i++){
        var rows = tables[i].getElementsByTagName("tr");         //获取表格里的函数rows
        for(var j=0; j<rows.length; j++){
            if(j%2 == 0){
                addClass(rows[j],"odd");                         //偶数行时,添加class为odd的值
            }
        }
    }*/
    
}


/*****************鼠标浮动行高亮显示**************************/
function highlightRows(){
    //旧浏览器对象检测
    if(!document.getElementsByTagName) return false;
    
    //获取元素
    var rows = document.getElementsByTagName("tr");
    
    //高亮显示    鼠标移上则给这一行动态添加一个新class属性,鼠标移开则重新赋值为原来的class属性
    for(var i=0; i<rows.length; i++){
        rows[i].oldClassName = rows[i].className;            //把tr的class属性保存起来
        rows[i].onmouseover = function(){
            addClass(this,"highlight");                       //鼠标经过时添加clas为highlight的值
        }
        rows[i].onmouseout = function(){
            this.className = this.oldClassName;               //鼠标移开,还原之前的class值
        }
    }
}

/*****************输出缩略词表********************************/
function displayAbbreviations(){
    //旧浏览器对象检测
    if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    
    //获取元素
    var abbreviation = document.getElementsByTagName("abbr");
    if(abbreviation.length <1) return false;                  //如果没有abbr标签存在,则退出执行;否则,把abbr的title存入关联数组
    var defs = new Array();
    for(var i=0; i<abbreviation.length; i++){
        var current_abbr = abbreviation[i];
        if(current_abbr.childNodes.length<1) continue;        //如果有abbr标签,却没有直接点,说明是没有内容的abbr,则退出本次循环
        var definition = current_abbr.getAttribute("title");  //获取abbr的title属性值
        var key = current_abbr.lastChild.nodeValue;
        alert(key);
        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.childNodes.length < 1) return false;
    var header = document.createElement("h3");
    var header_text = document.createTextNode("Abbrviations");
    header.appendChild(header_text);
    
    var container = document.getElementById("content");
    container.appendChild(header);
    container.appendChild(dlist);
}



addLoadEvent(stripeTables);
addLoadEvent(highlightRows);
addLoadEvent(displayAbbreviations);

 

ok了。现在打开谷歌浏览器就可以看到隔行换色的表格了。

 

二、学与思

1、设置标志var odd = false;

这是一个不错的方法,不用像第二个方法那样,进行取模运算,虽然取模运算更容易理解,但是毕竟要计算。

还未进入循环时,设置为false,进来后if判断,判断为真,添加class= odd后,再次让标志位false,进入到下一次循环中。

2、节点的创建和挂载。