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、节点的创建和挂载。
JavaScript网站设计实践(六)编写live.html页面 改进表格显示的更多相关文章
- JavaScript网站设计实践(一)网站结构以及页面效果设计
这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录 ...
- JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本
一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页 ...
- JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果
一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...
- JavaScript网站设计实践(七)编写最后一个页面 改进表单
一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...
- JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示
一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...
- [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞
目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...
- 优化网站设计(十):最小化JAVASCRIPT和CSS
前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...
- web设计经验<六>令网站看起来不专业的10个设计误区
不管你是不是一个羽翼未丰企业的领导,专业的网站能为你带来的东西比你想象的多很多.退一万步来说,“考虑到我们是一个小厂”,粗糙的网站也许能被用户理解,但是不一定能接受.每天大家所浏览的大量的网站,已经从 ...
随机推荐
- xUTils框架的学习(二)
这章讲的是框架的DbUtils模块的学习 三 xUtils框架的DButils模块 最开始接触这个框架就是从数据库模块开始的.当时的需求是需要记录用户的登录数据,保存在本地以便进行离线登录.首先想到的 ...
- 巧用CSS文件愚人节恶搞(转)
明天就是4月1日愚人节了,也就是那个可适度开玩笑.整蛊的日子了.如果你想和那些要上网的朋友或同事开个极客式玩笑,那就来试试这个国外网友Wes Bos分享的 CSS 文件吧. 一.打开浏览器的 Cust ...
- 用纯css写出三角形
1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...
- MS-SQL索引类型
一.索引的概念 索引就是加快检索表中数据的方法.数据库的索引类似于书籍的索引.在书籍中,索引允许用户不必翻阅完整个书就能迅速地找到所需要的信息.在数据库中,索引也允许数据库程序迅速地找到表中的 ...
- 远程调试hadoop各组件
远程调试对应用程序开发十分有用.例如,为不能托管开发平台的低端机器开发程序,或在专用的机器上(比如服务不能中断的 Web 服务器)调试程序.其他情况包括:运行在内存小或 CUP 性能低的设备上的 Ja ...
- (转载)HTML与XHTML有什么区别
转自:http://zhidao.baidu.com/link?url=8wvu7Jbzr-wjeKdWCwWkIiJNSpO3HHLERkgQu1QzuLOPT0zvzkHn9HbAFEjPdchP ...
- java.lang.ExceptionInInitializerError的原因(转)
这个错误是说变量初始化出现问题,通常出现在静态变量尤其是单例模式.这种问题往往是初始化顺序不对造成的,下面举个简单的例子. import java.util.HashMap; import java. ...
- 如何把本机Sql Sever数据库转移到虚拟主机sql数据库
不少站长的网站都是asp+access的网站 因为操作access数据库的网站非常简单,甚至你对数据库不懂都可以 但如果是mssql数据库的网站,有些新手朋友就不知道该怎么弄了 在这里给大家做个简 ...
- VBScript: Windows脚本宿主介绍
Windows脚本宿主(Windows Script Host, WSH)是一个Windows管理工具.WSH创建了一个脚本运行的主环境,WSH使脚本能够使用对象和服务,并提供脚本执行的准则.WSH还 ...
- MMU(what,how,todo)
出处:http://www.100ask.org/bbs/forum.php?mod=viewthread&tid=11580&fromuid=5490 正文黑色,代码蓝色,重点标红. ...