JS實(shí)現(xiàn)隔行換色的表格排序
更新時(shí)間：2017年03月27日 08:34:04 作者：小柒_912
本篇文章主要介紹了JS實(shí)現(xiàn)隔行換色的表格排序的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
1、獲取元素 2、獲取數(shù)據(jù) 3、綁定數(shù)據(jù) 4、隔行換色 5、表格排序
<table cellpadding="0" cellspacing="0" id="tab"> <thead> <tr> <th class="cursor">姓名</th> <th class="cursor">年齡</th> <th class="cursor">分?jǐn)?shù)</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>
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; // 惰性思想的運(yùn)用；
function makeArray(arg){
if(flg){ // 標(biāo)準(zhǔn)瀏覽器
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();//當(dāng)返回0-1之間的隨機(jī)小數(shù)，說(shuō)明參數(shù)傳錯(cuò)了；
}
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));
}
//對(duì)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'];//‘a(chǎn)lpha(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){
//升級(jí)3：處理float
if(attr==='float'){
curEle.style.cssFloat=value;
curEle.style.styleFloat=value;
return;
}
//升級(jí)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;
//升級(jí)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){//第三個(gè)參數(shù)沒有-獲取
return this.getCss(curEle,argTwo);
}else{//當(dāng)有第三個(gè)參數(shù)-設(shè)置一個(gè)樣式
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;//獲取所有的子節(jié)點(diǎn)
var ary=[];
for(var i=0; i<childs.length; i++){
var cur=childs[i];
if(cur.nodeType==1){//首先保證是子元素，再考慮是否過(guò)濾；
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:類數(shù)組轉(zhuǎn)數(shù)組
makeArray:makeArray,
//jsonParse:把JSON格式的字符串轉(zhuǎn)成JSON格式的數(shù)據(jù)（對(duì)象）
jsonParse:jsonParse,
//rnd:求一定范圍的隨機(jī)數(shù)，包含最大值；
rnd:rnd,
//getByClass:通過(guò)class名，可以限制范圍的獲取元素
getByClass:getByClass,
//hasClass:判斷元素身上是否有某個(gè)class名
hasClass:hasClass,
//addClass:給元素批量添加出class名
addClass:addClass,
//removeClass:從元素身上批量刪除class名
removeClass:removeClass,
//getCss:獲取非行間樣式
getCss:getCss,
//setCss:給元素設(shè)置一個(gè)樣式
setCss:setCss,
//setGroupCss:給元素設(shè)置一組樣式
setGroupCss:setGroupCss,
//css:集獲取，設(shè)置一個(gè)，設(shè)置一組為一體；
css:css,
//win:瀏覽器盒子模型的兼容處理
win:win,
//offset:元素偏移量的兼容處理；
offset:offset,
//getChildren:獲取當(dāng)前元素下的所有子元素（可以通過(guò)標(biāo)簽名過(guò)濾子元素）
getChildren:getChildren,
//prev：獲取當(dāng)前元素的上一個(gè)哥哥元素
prev:prev,
//next:獲取當(dāng)前元素的下一個(gè)弟弟元素
next:next,
//sibling:獲取當(dāng)前元素的相鄰元素；
sibling:sibling,
//prevAll:獲取當(dāng)前元素所有的哥哥元素
prevAll:prevAll,
//nextAll:獲取當(dāng)前元素所有的弟弟元素
nextAll:nextAll,
//siblings:獲取當(dāng)前元素所有的兄弟元素；
siblings:siblings,
//firstChild:獲取當(dāng)前容器下第一個(gè)子元素
firstChild:firstChild,
//lastChild:獲取當(dāng)前容器下最后一個(gè)子元素
lastChild:lastChild,
//index:當(dāng)前元素的索引（當(dāng)前元素排行第幾）；
index:index,
//appendChild:把新元素插入到父容器的末尾；
appendChild:appendChild,
//prependChild:把新元素插入到父容器的開頭；
prependChild:prependChild,
//insertBefore:把新元素插入到指定元素的前面
insertBefore:insertBefore,
//insertAfter:把新元素插入到指定元素的后面；
insertAfter:insertAfter
}
})();
所用到的 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 += '<tr>\
<td>' + curData.name + '</td>\
<td>' + curData.age + '</td>\
<td>' + curData.score + '</td>\
<td>' + curData.sex + '</td>\
</tr>';
}
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);
}
}
}
})();
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
基于JavaScript實(shí)現(xiàn)div層跟隨滾動(dòng)條滑動(dòng)
項(xiàng)目需求是這樣的：在一個(gè)頁(yè)面放2個(gè)懸浮框，懸浮框隨頁(yè)面的上下滾動(dòng)有上下波動(dòng)的效果，最終固定在同一位置，下面通過(guò)本文給大家分享基于JavaScript實(shí)現(xiàn)div層跟隨滾動(dòng)條滑動(dòng)的相關(guān)資料，對(duì)js div跟隨滾動(dòng)條滑動(dòng)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
javascript parseInt() 函數(shù)的進(jìn)制轉(zhuǎn)換注意細(xì)節(jié)
parseInt(string, radix) 有2個(gè)參數(shù)，第一個(gè)string 是傳入的數(shù)值，第二個(gè)radix是 傳入數(shù)值的進(jìn)制，參數(shù)radix 可以忽略，默認(rèn)為 10，各種進(jìn)制的數(shù)轉(zhuǎn)換為 十進(jìn)制整數(shù),接下來(lái)詳細(xì)介紹，感興趣的朋友可以了解下哦2013-01-01
Echats圖表大屏自適應(yīng)的實(shí)現(xiàn)方法
很多時(shí)候我們需要用圖表來(lái)制作我們統(tǒng)計(jì)的數(shù)據(jù)直觀的分析,所以我們可以用Echarts來(lái)制作圖表,這篇文章主要給大家介紹了關(guān)于Echats圖表大屏自適應(yīng)的實(shí)現(xiàn)方法,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了表單序列化與jq中的serialize使用,需要的朋友可以參考下2014-02-02
js的map、flatMap和find、filter的使用詳解
map和flatMap都是返回一個(gè)新數(shù)組,map不會(huì)改變數(shù)組長(zhǎng)度,flatMap可以改變長(zhǎng)度,find和filter都是過(guò)濾操作,find只會(huì)返回第一個(gè)找到的值,而filter會(huì)返回全部符合要求的對(duì)象2024-12-12
一個(gè)最基本的JavaScript命令是document.write。這個(gè)命令簡(jiǎn)單地打印指定的文本內(nèi)容到頁(yè)面上。為了逐字打印文本，在打印的文本字符串加上單引號(hào)2014-02-02
這篇文章主要介紹了改變隱藏的input中value值的方法,需要的朋友可以參考下2014-03-03
javascript之querySelector和querySelectorAll使用說(shuō)明
其實(shí)關(guān)于querySelector和querySelectorAll的介紹說(shuō)明很多,在此主要是做個(gè)記錄2011-10-10
js數(shù)字轉(zhuǎn)換為float,取N位小數(shù)
在javascript中不分單精度f(wàn)loat和雙精度double，凡事有小數(shù)的變量都認(rèn)為是float，因此要取小數(shù)后的n位，要用方法toFixed(n)來(lái)得到2014-02-02
在頁(yè)面數(shù)據(jù)處理的過(guò)程中都會(huì)不可避免的使用字符串的截取操作,下面這篇文章主要給大家介紹了關(guān)于js字符串截取指定字符前面/后面的字符串,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06