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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！