一、编写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、节点的创建和挂载。

JavaScript网站设计实践(六)编写live.html页面 改进表格显示的更多相关文章

  1. JavaScript网站设计实践(一)网站结构以及页面效果设计

    这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录 ...

  2. JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  3. JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本

    一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页 ...

  4. JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果

    一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...

  5. JavaScript网站设计实践(七)编写最后一个页面 改进表单

    一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...

  6. JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示

    一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...

  7. [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞

    目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...

  8. 优化网站设计(十):最小化JAVASCRIPT和CSS

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

  9. web设计经验<六>令网站看起来不专业的10个设计误区

    不管你是不是一个羽翼未丰企业的领导,专业的网站能为你带来的东西比你想象的多很多.退一万步来说,“考虑到我们是一个小厂”,粗糙的网站也许能被用户理解,但是不一定能接受.每天大家所浏览的大量的网站,已经从 ...

随机推荐

  1. Maven配置文件Pom.xml详解

    <project xmlns="http://maven.apache.org/POM/4.0.0 "      xmlns:xsi="http://www.w3. ...

  2. 【转】 Homebrew – OSX下简单的包管理系统

    很多linux用户很喜欢 (Debian/Ubuntu)系列的apt包管理系统和(Redhat/Fedora)系列的yum包管理系统. 包括Windows用户都有多种方便的软件管理工具,如:360软件 ...

  3. C# 中的 ref 和 out 的意义和使用方法

    原文C# 中的 ref 和 out 的意义和使用方法 向方法传递一个实参时,对应的形参会用实参的一个副本来初始化,不管形参是值类型(例如 int),可空类型(int?),还是引用类型,这一点都是成立的 ...

  4. Channel 详解

    java.nio.channels.FileChannel封装了一个文件通道和一个FileChannel对象,这个FileChannel对象提供了读写文件的连接. 1.接口 2.通道操作 a.所有通道 ...

  5. 简单的activemq的封装和使用

    天空中飘着小雨,实在是适合写代码的时节. 1 package ch02.chat; import java.io.Serializable; import javax.jms.Connection; ...

  6. Hander

    多线程与UI线程间通信 向你展示如何从任务发送数据对象上运行用户界面(UI)线程.该特性允许你的任务做背景的工作结果,然后再到UI元素如位图. 每个应用程序都有自己的特殊的线程运行的UI对象如视图对象 ...

  7. 【Kafka入门】搭建Kafka本地环境

    本博文介绍如何一步步搭建起Kafka本地环境. 下载Kafka 0.9.0.0 并配置软链接 下载好后,放入电脑本地安装目录,mac下我放在/usr/local下,解压Kafka. -0.9.0.0. ...

  8. Activity的lanuchmode

    假设: 假设栈有A-B-C-D,四个activity.其中D Activity在栈顶 standard: 此时跳转到D Activity,跳转后栈的情况是A-B-C-D-D singleTop: 此时 ...

  9. RegExp.exec

    来自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec Summ ...

  10. python 继承和多态

    在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类.父类或超类(Base class.Supe ...