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


Posted in Javascript onMarch 27, 2017

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

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

Javascript 相关文章推荐
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
Vue中keep-alive组件作用详解
Feb 04 Javascript
vue实现购物车加减
May 30 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
浅谈react路由传参的几种方式
Mar 23 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 #Javascript
axios学习教程全攻略
Mar 26 #Javascript
js oncontextmenu事件使用详解
Mar 25 #Javascript
js 函数式编程学习笔记
Mar 25 #Javascript
CodeMirror js代码加亮使用总结
Mar 25 #Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 #Javascript
在js中做数字字符串补0(js补零)
Mar 25 #Javascript
You might like
php生成年月日下载列表的方法
2015/04/24 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
Web开发之JavaScript
2012/03/29 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Python os模块学习笔记
2015/06/21 Python
python搭建微信公众平台
2016/02/09 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Django组件content-type使用方法详解
2019/07/19 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
女大学生毕业找工作的自我评价
2013/10/03 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
电影红河谷观后感
2015/06/11 职场文书
初婚初育证明范本
2015/06/18 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS