/*p#example{color:grey;font:18px'Arial',sans-serif;}*/body{font-family:"Helvetica","Arial",sans-serif;background:#fff;color:#000}table{margin:auto;border:solid1px#699;text-align:center;width:600px;}caption{margin:auto;padding:10px;font-weight:bold;}th{background:#9cc;font-weight:normal;padding:5px;border:1pxdotted#699;height:40px;}/*tr:nth-child(odd){background:#ffc;}tr:nth-child(even){background:#fff;}隔行变色*/td{height:40px;}

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>CSS-DOM</title><scriptsrc="addLoadEvent.js"></script><linkrel="stylesheet"type="text/css"href="9.3.2.css"><scriptsrc="9.3.2.js"></script></head><body><table><caption>Itinerary</caption><thead><tr><th>when</th><th>where</th></tr></thead><tbody><tr><td>June9th</td><td>Portland.<abbrtitle="Oregon">OR</abbr></td></tr><tr><td>June10th</td><td>seattle,<abbrtitle="Washington">WA</abbr></td></tr><tr><td>June12th</td><td>Sacramento,<abbrtitle="California">CA</abbr></td></tr></tbody></body></html>

functionaddLoadEvent(func){//不管在页面加载完毕执行多少个函数，都应付自如varoldonload=window.onload;if(typeofwindow.onload!='function'){window.onload=func;}else{window.onload=function(){oldonload();func();}}}functionstipeTables(){if(!document.getElementsByTagName)returnfalse;vartables=document.getElementsByTagName("table");varodd,rows;for(vari=0;i<tables.length;i++){odd=false;rows=tables[i].getElementsByTagName("tr");for(varj=0;j<rows.length;j++){if(odd==true){rows[j].style.backgroundColor="#ffc";odd=false;}else{odd=true;}}}}functiondisplayAbbreviations(){//检查兼容性if(!document.getElementsByTagName||!document.createElement||!document.createTextNode)returnfalse;varabbreviations=document.getElementsByTagName("abbr");//取得所有缩略词if(abbreviations.length<1)false;//兼容ie6及以下低版本浏览器，使得循环继续vardefs=newArray();for(vari=0;i<abbreviations.length;i++){//遍历这些缩略词varcurrent_abbr=abbreviations[i];vardefinition=current_abbr.getAttribute("title");varkey=current_abbr.lastChild.nodeValue;defs[key]=definition;}vardlist=document.createElement("dl");//创建定义列表for(keyindefs){//遍历定义vardefinition=defs[key];vardtitle=document.createElement("dt");//创建定义标题vardtitle_text=document.createTextNode(key);dtitle.appendChild(dtitle_text);varddesc=document.createElement("dd");//创建定义描述varddesc_text=document.createTextNode(definition);ddesc.appendChild(ddesc_text);//把它们添加到定义列表dlist.appendChild(dtitle);dlist.appendChild(ddesc);}/*if(dlist.childNodes.length<1)returnfalse;//在低版本浏览器下，因为defs数组是空的，所以一个个立刻退出displayAbbreviations函数*/varheader=document.createElement("h3");//创建标题varheader_text=document.createTextNode("Abbreviations");header.appendChild(header_text);document.body.appendChild(header);//把标题添加到页面主体document.body.appendChild(dlist);//把定义列表添加到主体}addLoadEvent(stipeTables);addLoadEvent(displayAbbreviations);//鼠标移到某行，该行文本加粗，效果等同于tr:hover{font-weight:bold;}functionhighlightRows(){if(!document.getElementsByTagName)returnfalse;varrows=document.getElementsByTagName("tr");for(vari=0;i<rows.length;i++){rows[i].onmouseover=function(){this.style.fontWeight="bold";}rows[i].onmouseout=function(){this.style.fontWeight="normal";}}}addLoadEvent(highlightRows);

浏览器效果如下：