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