这篇文章给大家分享的是有关JS如何实现隔行换色的表格排序的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联-云计算及IDC服务提供商,涵盖公有云、IDC机房租用、四川移动机房托管、等保安全、私有云建设等企业级互联网基础服务,欢迎联系:18982081108
1、获取元素 2、获取数据 3、绑定数据 4、隔行换色 5、表格排序
姓名 | 年龄 | 分数 | 性别 |
---|
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; 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 所用到的 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 += '\ '; } 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); } } } })();' + curData.name + ' \' + curData.age + ' \' + curData.score + ' \' + curData.sex + ' \感谢各位的阅读!关于“JS如何实现隔行换色的表格排序”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
本文题目:JS如何实现隔行换色的表格排序
链接URL:http://cdkjz.cn/article/pogggg.html