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

1、获取元素    2、获取数据   3、绑定数据   4、隔行换色   5、表格排序

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

css 样式

*{
  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;
 }

JS

所用到的  util.js

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

所用到的  biaoge.js

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

来源：http://www.qdfuns.com/notes/42231/0f55ec4137c30e212fbbb13f4f4116e4.html