来看看：CSS,JavaScript和MooTools制造斑马纹表格
Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。破洛洛文章简介：三种制造隔行斑马线表格的办法先容.复杂的斑马纹表格，假如页面上有大批的表格数据时，隔行变色的斑马纹会匡助我们疾速浏览，有益于用户体验。我们明天不会商在静态言语中的办法，只会商CSS，JavaScript，MooTools是怎样完成的，并有三种可行性计划。
我们的表格
TheHtmlCode:
<tableid="playlist"cellspacing="0"><tbody><tr><td>1</td><td>LostInThePlot</td><td>TheDears</td></tr><tr><td>2</td><td>Poison</td><td>TheConstantines</td></tr><tr><td>3</td><td>PleaFromACatNamedVirtute</td><td>TheWeakerthans</td></tr><tr><td>4</td><td>MelissaLouise</td><td>Chixdiggit!</td></tr><tr><td>5</td><td>LivingRoom</td><td>TeganAndSara</td></tr><tr><td>6</td><td>Speed</td><td>BranVan3000</td></tr><tr><td>7</td><td>FastMoneyBlessing</td><td>KingCobbSteelie</td></tr><tr><td>8</td><td>Sore</td><td>Buck65</td></tr><tr><td>9</td><td>LoveTravel</td><td>DankoJones</td></tr><tr><td>10</td><td>YouNeverLetMeDown</td><td>Furnaceface</td></tr></tbody></table>
我们下面所看到的表格，就是我们要丑化的表格，要完成斑马纹的表格。
计划一:
在CSS3中有很多的伪类选择器，个中的
E:nth-child(n)：{attribute}
它能够婚配父元素中的第n个子元素E。
TheCSS3Code
/*取得奇偶数的子元素*/tr:nth-child(odd){background-color:#eee;}//一切奇数序子元素tr:nth-child(even){background-color:#fff;}//一切偶数序子元素/*同上一样的感化*/tr:nth-child(2n){background-color:#eee;}//前往偶数序的子元素tr:nth-child(2n+1){background-color:#fff;}//前往奇数序的子元素
计划二:
TheJavaScriptCode
//thisfunctionisneedtoworkaround
//abuginIErelatedtoelementattributes
functionhasClass(obj){
varresult=false;
if(obj.getAttributeNode("class")!=null){
result=obj.getAttributeNode("class").value;
}
returnresult;
}
functionstripe(id){
//theflagwellusetokeeptrackof
//whetherthecurrentrowisoddoreven
vareven=false;
//ifargumentsareprovidedtospecifythecolours
//oftheeven&oddrows,thenusethethem;
//otherwiseusethefollowingdefaults:
varevenColor=arguments?arguments:"#fff";
varoddColor=arguments?arguments:"#eee";
//obtainareferencetothedesiredtable
//ifnosuchtableexists,abort
vartable=document.getElementById(id);
if(!table){return;}
//bydefinition,tablescanhavemorethanonetbody
//element,sowellhavetogetthelistofchild
//<tbody>s
vartbodies=table.getElementsByTagName("tbody");
//anditeratethroughthem...
for(varh=0;h<tbodies.length;h++){
//findallthe<tr>elements...
vartrs=tbodies.getElementsByTagName("tr");
//...anditeratethroughthem
for(vari=0;i<trs.length;i++){
//avoidrowsthathaveaclassattribute
//orbackgroundColorstyle
if(!hasClass(trs)&&!trs.style.backgroundColor){
//getallthecellsinthisrow...
vartds=trs.getElementsByTagName("td");
//anditeratethroughthem...
for(varj=0;j<tds.length;j++){
varmytd=tds;
//avoidcellsthathaveaclassattribute
//orbackgroundColorstyle
if(!hasClass(mytd)&&!mytd.style.backgroundColor){
mytd.style.backgroundColor=even?evenColor:oddColor;
}
}
}
//flipfromoddtoeven,orvice-versa
even=!even;
}
}
}
window.onload=function(){stripe(playlist,#fff,#eee);}
在之前MooTools1.1的老版本中是不撑持CSS3选择器的，那又怎样完成那。
计划三:
TheCSSCode:
.odd{background:#fff;color:#666;}.even{background-color:#3d80df;color:#FFF;}
TheMooToolsJavaScript：
window.addEvent(domready,function(){varcount=0;$(table.shade-tabletr).each(function(el){el.addClass(count++%2==0?odd:even);});});
假如你已利用了MooTools1.2+的版本，我们就能够用MooToolsSelectors的伪类选择器，它的语法是相似于CSS3的伪类选择器的。
TheMooToolsJavaScript：
$(table#playlisttr:nth-child(odd)).addClass(odd);$(table#playlisttr:nth-child(even)).addClass(even);/*$(table#playlisttr:nth-child(2n+1)).addClass(odd);$(table#playlisttr:nth-child(2n)).addClass(even);*/
在鼠标经由时高亮表格行列
TheCSSCode:
.over{background-color:#F00;color:#FFF;}
TheMooToolsJavaScript:
$$("table#playlisttr").addEvent(mou搜索引擎优化ver,function(){this.addClass("over");}).addEvent(mou搜索引擎优化ut,function(){this.removeClass("over");});</p>
通过我们的HTML编辑器，您能够编辑HTML，然后点击按钮来查看结果。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
页:
[1]