JS实现隔行换色的表格排序

<table cellpadding="0" cellspacing="0" id="tab"> <thead> <tr>  <th class="cursor">姓名</th>  <th class="cursor">年龄</th>  <th class="cursor">分数</th>  <th>性别</th> </tr> </thead> <tbody> <!--<tr class="bg0">  <td>赵老大</td>  <td>45</td>  <td>89</td>  <td>0</td> </tr> <tr class="bg1">  <td>赵老大</td>  <td>45</td>  <td>89</td>  <td>0</td> </tr>--> </tbody></table><script type="text/javascript" src="js/utils.js"></script><script type="text/javascript" src="js/biaoge.js"></script>

*{   margin:0;   padding:0;  }  table{   width: 800px;   margin:50px auto;   box-shadow: 0 0 10px #333;   border-radius: 10px;   overflow: hidden;   font-size: 18px;  }  table thead tr{   text-align: center;   width: 100%;   height: 50px;   background:#ffb4b4;  }  table thead th{   width: 200px;   line-height: 50px;   color: white;  }  table tbody tr{   height: 40px;   line-height: 40px;   text-align: center;  }  table tbody tr.bg0{   background: lightgoldenrodyellow;  }  table tbody tr.bg1{   background: lightgray;  }  .cursor{   cursor: pointer;  }

var utils=(function(){ var flg='getComputedStyle' in window; // 惰性思想的运用； function makeArray(arg){  if(flg){ // 标准浏览器   return Array.prototype.slice.call(arg);  }else{   var ary=[];   for(var i=0; i<arg.length; i++){    ary.push(arg[i]);   }   return ary;  } } function jsonParse(jsonStr){  return 'JSON' in window?JSON.parse(jsonStr):eval('('+jsonStr+')'); } function rnd(n,m){  n=Number(n);  m=Number(m);  if(isNaN(n) || isNaN(m)){   return Math.random();//当返回0-1之间的随机小数，说明参数传错了；  }  if(n>m){   var tmp=m;   m=n;   n=tmp;  }  return Math.round(Math.random()*(m-n)+n); } function getByClass(strClass,parent){  parent=parent||document;  if(flg){   return this.makeArray(parent.getElementsByClassName(strClass));  }  //对IE浏览器兼容处理；  var aryClass=strClass.replace(/(^ +)|( +$)/g,'').split(//s+/g);  var nodeList=parent.getElementsByTagName('*');  var ary=[];  for(var i=0; i<nodeList.length; i++){   var cur=nodeList[i];   var bOk=true;   for(var j=0; j<aryClass.length; j++){    var reg=new RegExp('(^| +)'+aryClass[j]+'( +|$)');    if(!reg.test(cur.className)){     bOk=false;     break;    }   }   if(bOk){    ary.push(cur);   }  }  return ary; } function hasClass(curEle,cName){  var reg=new RegExp('(^| +)'+cName+'( +|$)','g');  return reg.test(curEle.className); } function addClass(curEle,strClass){  var aryClass=strClass.replace(/(^ +)|( +$)/g,'').split(//s+/g);  for(var i=0; i<aryClass.length; i++){   if(!this.hasClass(curEle,aryClass[i])){    curEle.className+=' '+aryClass[i];   }  } } function removeClass(curEle,strClass){  var aryClass=strClass.replace(/(^ +)|( +$)/g,'').split(//s+/g);  for(var i=0; i<aryClass.length; i++){   var reg=new RegExp('(^| +)'+aryClass[i]+'( +|$)','g');   if(reg.test(curEle.className)){    curEle.className=curEle.className.replace(reg,' ').replace(/(^ +)|( +$)/g,'').replace(//s+/g,' ');   }  } } function getCss(curEle,attr){  var val=null;  var reg=null;  if(flg){   val=getComputedStyle(curEle,false)[attr];  }else{   if(attr==='opacity'){    val=curEle.currentStyle['filter'];//‘alpha(opacity=10)';    reg=/^alpha/(opacity[=:](/d+(/./d+)?)/)$/;    return reg.test(val)?RegExp.$1/100:1;   }   val=curEle.currentStyle[attr];  }  //如果带单位了，干掉单位；  reg=/^([+-])?(/d+(/./d+)?)(px|pt|rem|em)?$/gi;  return reg.test(val)?parseFloat(val):val; } function setCss(curEle,attr,value){  //升级3：处理float  if(attr==='float'){   curEle.style.cssFloat=value;   curEle.style.styleFloat=value;   return;  }  //升级2：处理透明度  if(attr=='opacity'){   curEle.style.opacity=value;   curEle.style.filter='alpha(opacity='+(value*100)+')';   return;  }  var reg=/(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))/gi;  //升级1：处理单位；  if(reg.test(attr)){   if(value!=='auto' || value.toString().indexOf('%') == -1){    value=parseFloat(value)+'px';   }  }  curEle.style[attr]=value; } function setGroupCss(curEle,opt){  if(Object.prototype.toString.call(opt) !== '[object Object]') return;  for(var attr in opt){   this.setCss(curEle,attr,opt[attr]);  } } function css(curEle){  var argTwo=arguments[1];  if(typeof argTwo==='string'){   var argThree=arguments[2];   if(argThree===undefined){//第三个参数没有-获取    return this.getCss(curEle,argTwo);   }else{//当有第三个参数-设置一个样式    this.setCss(curEle,argTwo,argThree);   }  }  if({}.toString.call(argTwo)==='[object Object]'){   this.setGroupCss(curEle,argTwo);  } } function win(attr,value){  if(value===undefined){   return document.documentElement[attr]||document.body[attr];  }  document.documentElement[attr]=document.body[attr]=value; } function offset(curEle){  var l=curEle.offsetLeft;  var t=curEle.offsetTop;  var par=curEle.offsetParent;  while(par){   if(window.navigator.userAgent.indexOf('MSIE 8') == -1){    l+=par.clientLeft;    t+=par.clientTop;   }   l+=par.offsetLeft;   t+=par.offsetTop;   par=par.offsetParent;  }  return {left:l,top:t} } function getChildren(curEle,tagName){  var childs=curEle.childNodes;//获取所有的子节点  var ary=[];  for(var i=0; i<childs.length; i++){   var cur=childs[i];   if(cur.nodeType==1){//首先保证是子元素，再考虑是否过滤；    if(tagName){     if(cur.tagName.toLocaleLowerCase()===tagName.toLowerCase()){      ary.push(cur);     }    }else{     ary.push(cur)    }   }  }  return ary; } function prev(curEle){  if(flg){   return curEle.previousElementSibling;  }  var pre=curEle.previousSibling;  while(pre && pre.nodeType !== 1){   pre=pre.previousSibling;  }  return pre; } function next(curEle){  if(flg){   return curEle.nextElementSibling;  }  var nex=curEle.nextSibling;  while(nex && nex.nodeType !== 1){   nex=nex.nextSibling;  }  return nex; } function sibling(curEle){  var ary=[];  var pre=this.prev(curEle);  var nex=this.next(curEle);  if(pre) ary.push(pre);  if(nex) ary.push(nex);  return ary; } function prevAll(curEle){  var ary=[];  var pre=this.prev(curEle);  while(pre){   ary.push(pre);   pre=this.prev(pre);  }  return ary; } function nextAll(curEle){  var nex=this.next(curEle);  var ary=[];  while(nex){   ary.push(nex);   nex=this.next(nex);  }  return ary; } function siblings(curEle){  var ary1=this.prevAll(curEle);  var ary2=this.nextAll(curEle);  return ary1.concat(ary2); } function firstChild(curEle){  var children=this.getChildren(curEle);  return children[0]; } function lastChild(curEle){  var children=this.getChildren(curEle);  return children[children.length-1]; } function index(curEle){  return this.prevAll(curEle).length; } function appendChild(curEle,parent){  parent.appendChild(curEle); } function prependChild(curEle,parent){  var first=this.firstChild(parent);  if(first){   parent.insertBefore(curEle,first);  }else{   parent.appendChild(curEle);  } } function insertBefore(curEle,oldEle){  oldEle.parentNode.insertBefore(curEle,oldEle); } function insertAfter(curEle,oldEle){  var nex=this.next(oldEle);  if(nex){   oldEle.parentNode.insertBefore(curEle,nex);  }else{   oldEle.parentNode.appendChild(curEle);  } } return {  //makeArray:类数组转数组  makeArray:makeArray,  //jsonParse:把JSON格式的字符串转成JSON格式的数据（对象）  jsonParse:jsonParse,  //rnd:求一定范围的随机数，包含最大值；  rnd:rnd,  //getByClass:通过class名，可以限制范围的获取元素  getByClass:getByClass,  //hasClass:判断元素身上是否有某个class名  hasClass:hasClass,  //addClass:给元素批量添加出class名  addClass:addClass,  //removeClass:从元素身上批量删除class名  removeClass:removeClass,  //getCss:获取非行间样式  getCss:getCss,  //setCss:给元素设置一个样式  setCss:setCss,  //setGroupCss:给元素设置一组样式  setGroupCss:setGroupCss,  //css:集获取，设置一个，设置一组为一体；  css:css,  //win:浏览器盒子模型的兼容处理  win:win,  //offset:元素偏移量的兼容处理；  offset:offset,  //getChildren:获取当前元素下的所有子元素（可以通过标签名过滤子元素）  getChildren:getChildren,  //prev：获取当前元素的上一个哥哥元素  prev:prev,  //next:获取当前元素的下一个弟弟元素  next:next,  //sibling:获取当前元素的相邻元素；  sibling:sibling,  //prevAll:获取当前元素所有的哥哥元素  prevAll:prevAll,  //nextAll:获取当前元素所有的弟弟元素  nextAll:nextAll,  //siblings:获取当前元素所有的兄弟元素；  siblings:siblings,  //firstChild:获取当前容器下第一个子元素  firstChild:firstChild,  //lastChild:获取当前容器下最后一个子元素  lastChild:lastChild,  //index:当前元素的索引（当前元素排行第几）；  index:index,  //appendChild:把新元素插入到父容器的末尾；  appendChild:appendChild,  //prependChild:把新元素插入到父容器的开头；  prependChild:prependChild,  //insertBefore:把新元素插入到指定元素的前面  insertBefore:insertBefore,  //insertAfter:把新元素插入到指定元素的后面；  insertAfter:insertAfter }})();

(function () { var oTab = document.getElementById('tab'); var tHead = oTab.tHead; var tCells = tHead.rows[0].cells; var tBody = oTab.tBodies[0]; var aRows = tBody.rows; var data = null; getData(); function getData() {  var xml = new XMLHttpRequest;  xml.open('get', 'data.txt', false);  xml.onreadystatechange = function () {   if (xml.readyState === 4 && /^2/d{2}$/.test(xml.status)) {    data = utils.jsonParse(xml.responseText);   }  };  xml.send(); } bind(); function bind() {  var str = '';  for (var i = 0; i < data.length; i++) {   var curData = data[i];   curData.sex = curData.sex == 0 ? '男' : '女';   str += '<tr>/      <td>' + curData.name + '</td>/      <td>' + curData.age + '</td>/      <td>' + curData.score + '</td>/      <td>' + curData.sex + '</td>/      </tr>';  }  tBody.innerHTML = str; } changeColor(); function changeColor() {  for (var i = 0; i < aRows.length; i++) {   aRows[i].className = 'bg' + i % 2;  } } function sort(n) {  for (var i = 0; i < tCells.length; i++) {   tCells[i].flag = i == n ? tCells[i].flag * -1 : -1;  }  var ary = utils.makeArray(aRows);  ary.sort(function (a, b) {   a = a.cells[n].innerHTML;   b = b.cells[n].innerHTML;   if (isNaN(a) && isNaN(b)) {    return a.localeCompare(b) * tCells[n].flag;   }   return (a - b) * tCells[n].flag;  });  var frg = document.createDocumentFragment();  for (var i = 0; i < ary.length; i++) {   frg.appendChild(ary[i]);  }  tBody.appendChild(frg);  frg = null;  changeColor(); } for (var i = 0; i < tCells.length; i++) {  if (tCells[i].className == 'cursor') {   tCells[i].flag = -1;    tCells[i].index = i;   tCells[i].onclick = function () {    sort(this.index);   }  } }})();