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 相关文章推荐
ajax java 实现自动完成功能
Dec 19 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
javascript页面倒计时实例
Jul 25 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 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数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
python爬虫常用的模块分析
2014/08/29 Python
python使用cPickle模块序列化实例
2014/09/25 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
单利模式及python实现方式详解
2018/03/20 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
利用Python检测URL状态
2019/07/31 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python属性和内建属性实例解析
2020/01/14 Python
Python无损压缩图片的示例代码
2020/08/06 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
小升初自荐信范文
2015/03/05 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书