简单的斑马纹表格，如果页面上有大量的表格数据时，隔行变色的斑马纹会帮助我们快速阅读，有利于用户体验。我们今天不讨论在动态语言中的方法，只讨论CSS，JavaScript，MooTools 是如何实现的，并有三种可行性方案。我们的表格The Html Code: /*获得奇偶数的子元素*/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;} //返回奇数序的子元素 // this function is need to work around // a bug in IE related to element attributes function hasClass(obj) { var result = false; if (obj.getAttributeNode( html' target='_blank'>class ) != null) { result = obj.getAttributeNode( class ).value; } return result; }
function stripe(id) {
// the flag we'll use to keep track of // whether the current row is odd or even var even = false;
// if arguments are provided to specify the colours // of the even odd rows, then use the them; // otherwise use the following defaults: var evenColor = arguments[1] ? arguments[1] : #fff ; var oddColor = arguments[2] ? arguments[2] : #eee ;
// obtain a reference to the desired table // if no such table exists, abort var table = document.getElementById(id); if (! table) { return; }
// by definition, tables can have more than one tbody // element, so we'll have to get the list of child // tbody s var tbodies = table.getElementsByTagName( tbody );
// and iterate through them... for (var h = 0; h tbodies.length; h++) {
// find all the tr elements... var trs = tbodies[h].getElementsByTagName( tr );
// ... and iterate through them for (var i = 0; i trs.length; i++) {
// avoid rows that have a class attribute // or backgroundColor style if (!hasClass(trs[i]) ! trs[i].style.backgroundColor) {
// get all the cells in this row... var tds = trs[i].getElementsByTagName( td );
// and iterate through them... for (var j = 0; j tds.length; j++) {
var mytd = tds[j];
// avoid cells that have a class attribute // or backgroundColor style if (! hasClass(mytd) ! mytd.style.backgroundColor) {
mytd.style.backgroundColor = even ? evenColor : oddColor;
} } } // flip from odd to even, or vice-versa even = ! even; } } } window.onload=function(){stripe('playlist', '#fff', '#eee');} $('table.shade-table tr').each(function(el) { el.addClass(count++ % 2 == 0 ? 'odd' : 'even');}); 如果你已经使用了MooTools1.2+的版本，我们就可以用MooTools Selectors的伪类选择器，它的语法是类似于CSS3的伪类选择器的。 The MooTools JavaScript： $$( table#playlist tr ).addEvent('mouseover',function() {this.addClass( over );}).addEvent('mouseout',function() {this.removeClass( over );});html教程
