欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-10 18:31:26
1、获取元素    2、获取数据   3、绑定数据   4、隔行换色   5、表格...

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

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