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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 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 批量删除 sql语句
2009/06/05 PHP
2014过年倒计时示例
2014/01/31 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
python中反射用法实例
2015/03/27 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
中国制造网:Made-in-China.com
2019/10/25 全球购物
上海期货面试题
2014/01/31 面试题
自荐信写法介绍
2014/01/25 职场文书
小学美术教学反思
2014/02/01 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
大学生操行评语大全
2014/12/31 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers