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个设计误区
不管你是不是一个羽翼未丰企业的领导,专业的网站能为你带来的东西比你想象的多很多.退一万步来说,“考虑到我们是一个小厂”,粗糙的网站也许能被用户理解,但是不一定能接受.每天大家所浏览的大量的网站,已经从 ...
随机推荐
- apache开源项目--Jackrabbit
Apache Jackrabbit 是由 Apache Foundation 提供的 JSR-170 的开放源码实现.. 随着内容管理应用程序的日益普及,对用于内容仓库的普通.标准化 API 的需求已 ...
- ajax检测账户是否存在
Register.cshtml <div title="账户"> 账户 <input type="text" name="Acc_a ...
- Ext入门学习系列(五)表格控件(1)
上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...
- java jvm学习笔记八(实现jar包的代码签名)
欢迎装载请说明出处:http://blog.csdn.net/yfqnihao/article/details/8267669 课程源码:http://download.csdn.net/detai ...
- 线性存储结构-LinkedList
LinkedList内部采用链表的形式构建,是一个双向链表.除了继承List外,还继承了Deque接口,可以当做堆栈结构使用. private static final class Link<E ...
- Base-Android快速开发框架(四)--网络操作之FastJson以及AsyncHttpClient
Android的展示数据,除了上章所讲的本地存储外,大部分数据都来自于网络.首先介绍一下Android APP开发常见的网络操作方式.从网络层面上有底层的tcp/ip,也就是我们常见的socket套接 ...
- SimpleHttpServer的学习(1)
闲来没事,分析一下一个简单的HttpServer github地址: https://github.com/Filirom1/SimpleHTTPServer 实现的功能很简单就是一个FTP服务器 默 ...
- 【UR #12】实验室外的攻防战(BIT)
[题目链接] http://uoj.ac/problem/180 [题意] 给定两个1..n的排列AB,只有当ai<ai+1才能交换ai和ai+1,问是否能够将A转换为B. [思路] 令a[i] ...
- 用Python写的批量文件重命名
有些时候下载图片或其他文件,文件名都怪怪的,可选的办法是下载一个文件批量重命名的软件.当然,如果想自己'DIY'一把的话编个Python脚本最好不过了. 下面的代码实现的对指定类型的文件进行批量重 ...
- Event Managers
Some PLF-based controls expose a convenient facility for temporarily disabling their events and for ...