JS实现隔行换色的表格排序
1、获取元素 2、获取数据 3、绑定数据 4、隔行换色 5、表格排序
姓名 年龄 分数 性别
css样式
*{ margin:0; padding:0; } table{ width:800px; margin:50pxauto; box-shadow:0010px#333; border-radius:10px; overflow:hidden; font-size:18px; } tabletheadtr{ text-align:center; width:100%; height:50px; background:#ffb4b4; } tabletheadth{ width:200px; line-height:50px; color:white; } tabletbodytr{ height:40px; line-height:40px; text-align:center; } tabletbodytr.bg0{ background:lightgoldenrodyellow; } tabletbodytr.bg1{ background:lightgray; } .cursor{ cursor:pointer; }
JS
所用到的 util.js
varutils=(function(){ varflg='getComputedStyle'inwindow;//惰性思想的运用; functionmakeArray(arg){ if(flg){//标准浏览器 returnArray.prototype.slice.call(arg); }else{ varary=[]; for(vari=0;im){ vartmp=m; m=n; n=tmp; } returnMath.round(Math.random()*(m-n)+n); } functiongetByClass(strClass,parent){ parent=parent||document; if(flg){ returnthis.makeArray(parent.getElementsByClassName(strClass)); } //对IE浏览器兼容处理; vararyClass=strClass.replace(/(^+)|(+$)/g,'').split(/\s+/g); varnodeList=parent.getElementsByTagName('*'); varary=[]; for(vari=0;i 所用到的 biaoge.js
(function(){ varoTab=document.getElementById('tab'); vartHead=oTab.tHead; vartCells=tHead.rows[0].cells; vartBody=oTab.tBodies[0]; varaRows=tBody.rows; vardata=null; getData(); functiongetData(){ varxml=newXMLHttpRequest; 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(); functionbind(){ varstr=''; for(vari=0;i\ '+curData.name+' \'+curData.age+' \'+curData.score+' \'+curData.sex+' \ '; } tBody.innerHTML=str; } changeColor(); functionchangeColor(){ for(vari=0;i以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!