1、获取元素 2、获取数据 3、绑定数据 4、隔行换色 5、表格排序
<table cellpadding="0" cellspacing="0"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>分数</th> <th>性别</th> </tr> </thead> <tbody> <!--<tr> <td>赵老大</td> <td>45</td> <td>89</td> <td>0</td> </tr> <tr> <td>赵老大</td> <td>45</td> <td>89</td> <td>0</td> </tr>--> </tbody> </table> <script type="text/javascript" src="https://www.jb51.net/js/utils.js"></script> <script type="text/javascript" src="https://www.jb51.net/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=https://www.jb51.net/^alpha\(opacity[=:](\d+(\.\d+)?)\)$/; return reg.test(val)?RegExp.$1/100:1; } val=curEle.currentStyle[attr]; } //如果带单位了，干掉单位； reg=https://www.jb51.net/^([+-])?(\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=https://www.jb51.net/(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