JS实现隔行换色的表格排序
程序员文章站
2022-04-10 18:31:26
1、获取元素 2、获取数据 3、绑定数据 4、隔行换色 5、表格...
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); } } } })();
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!