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 相关文章推荐
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
AngularJs表单验证实例详解
May 30 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
js中如何完美的解析数据
Mar 18 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
js调用css属性写法
2013/09/21 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python程序语言快速上手教程
2012/07/18 Python
Python内建模块struct实例详解
2018/02/02 Python
Python发展简史 Python来历
2019/05/14 Python
python随机生成库faker库api实例详解
2019/11/28 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
大学生自我评价怎样写好
2013/10/23 职场文书
个性大学生自我评价
2013/12/04 职场文书
关于逃课的检讨书
2014/01/23 职场文书
选秀节目策划方案
2014/06/06 职场文书
python实现简易名片管理系统
2021/04/11 Python
python实现黄金分割法的示例代码
2021/04/28 Python
react 路由Link配置详解
2021/11/11 Javascript
部分武汉产收音机展览
2022/04/07 无线电