JS实现隔行换色的表格排序

 
 
 
 
姓名
年龄
分数
性别
 

 *{ 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; }

 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; im){ 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

 (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 \ ' + curData.age + '\ ' + curData.score + '\ ' + curData.sex + '\ '; } tBody.innerHTML = str; } changeColor(); function changeColor() { for (var i = 0; i