小柒_912通过本文主要向大家介绍了JS实现隔行换色的表格排序等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
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></div>
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;
}
</div>
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(cur