JS如何实现隔行换色的表格排序
这篇文章给大家分享的是有关JS如何实现隔行换色的表格排序的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
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); } } } })();
感谢各位的阅读!关于“JS如何实现隔行换色的表格排序”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!