css修改内容排序,css3表格内容排序筛选效果

特效描述：css3 表格内容排序 筛选效果。css3表格内容排序筛选效果

代码结构

1. HTML代码

NFL 2001 Offensive StatsRankTeamGmsYdsYds/GRuYdsRuYds/GPaYdsPaYds/GPtsPts/G

atlanta165070316.91773110.83297206.129118.2baltimore164773318.21598106.53175211.728418.9buffalo165137321.11686105.43451215.726516.6carolina164254265.9137285.82882180.125315.8dallas164402275.12184136.52218138.624615.4denver164817301.11877117.32940183.834021.2detroit164994312.1139887.43596224.827016.9

function sortTable(id, col, rev){

var tblEl = document.getElementById(id);

if(tblEl.reverseSort == null){

tblEl.reverseSort = new Array();

tblEl.lastColumn = 1;

}

if(tblEl.reverseSort[col] == null)

tblEl.reverseSort[col] = rev;

if(col == tblEl.lastColumn)

tblEl.reverseSort[col] = !tblEl.reverseSort[col];

tblEl.lastColumn = col;

var oldDsply = tblEl.style.display;

tblEl.style.display = "none";

var tmpEl;

var i, j;

var minVal, minIdx;

var testVal;

var cmp;

for(i = 0; i < tblEl.rows.length - 1; i++){

minIdx = i;

minVal = getTextValue(tblEl.rows[i].cells[col]);

for(j = i + 1; j < tblEl.rows.length; j++){

testVal = getTextValue(tblEl.rows[j].cells[col]);

cmp = compareValues(minVal, testVal);

if(tblEl.reverseSort[col])

cmp = -cmp;

if (cmp == 0 && col != 1)

cmp = compareValues(

getTextValue(tblEl.rows[minIdx].cells[1]),

getTextValue(tblEl.rows[j].cells[1])

);

if(cmp > 0){

minIdx = j;

minVal = testVal;

}

}

if(minIdx > i){

tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);

tblEl.insertBefore(tmpEl, tblEl.rows[i]);

}

}

makePretty(tblEl, col);

setRanks(tblEl, col, rev);

tblEl.style.display = oldDsply;

return false;

}

if(document.ELEMENT_NODE == null){

document.ELEMENT_NODE = 1;

document.TEXT_NODE = 3;

}

function getTextValue(el){

var i;

var s;

s = "";

for(i = 0; i < el.childNodes.length; i++)

if(el.childNodes[i].nodeType == document.TEXT_NODE)

s += el.childNodes[i].nodeValue;

else if (el.childNodes[i].nodeType == document.ELEMENT_NODE && el.childNodes[i].tagName == "BR")

s += " ";

else s += getTextValue(el.childNodes[i]);

return normalizeString(s);

}

function compareValues(v1, v2){

var f1, f2;

f1 = parseFloat(v1);

f2 = parseFloat(v2);

if(!isNaN(f1) && !isNaN(f2)){

v1 = f1;

v2 = f2;

}

if(v1 == v2)

return 0;

if(v1 > v2)

return 1

return -1;

}

var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");

var whtSpMult = new RegExp("\\s\\s+", "g");

function normalizeString(s){

s = s.replace(whtSpMult, " ");

s = s.replace(whtSpEnds, "");

return s;

}

var rowClsNm = "alternaterow";

var colClsNm = "sortedcolumn";

var rowTest = new RegExp(rowClsNm, "gi");

var colTest = new RegExp(colClsNm, "gi");

function makePretty(tblEl, col){

var i, j;

var rowEl, cellEl;

for(i = 0; i < tblEl.rows.length; i++){

rowEl = tblEl.rows[i];

rowEl.className = rowEl.className.replace(rowTest, "");

if(i % 2 != 0)

rowEl.className += " " + rowClsNm;

rowEl.className = normalizeString(rowEl.className);

for (j = 2; j < tblEl.rows[i].cells.length; j++){

cellEl = rowEl.cells[j];

cellEl.className = cellEl.className.replace(colTest, "");

if (j == col)

cellEl.className += " " + colClsNm;

cellEl.className = normalizeString(cellEl.className);

}

}

var el = tblEl.parentNode.tHead;

rowEl = el.rows[el.rows.length - 1];

for(i = 2; i < rowEl.cells.length; i++){

cellEl = rowEl.cells[i];

cellEl.className = cellEl.className.replace(colTest, "");

if(i == col)

cellEl.className += " " + colClsNm;

cellEl.className = normalizeString(cellEl.className);

}

}

function setRanks(tblEl, col, rev){

var i = 0;

var incr = 1;

if(tblEl.reverseSort[col])

rev = !rev;

if(rev){

incr = -1;

i = tblEl.rows.length - 1;

}

var count = 1;

var rank = count;

var curVal;

var lastVal = null;

while(col > 1 && i >= 0 && i < tblEl.rows.length){

curVal = getTextValue(tblEl.rows[i].cells[col]);

if(lastVal != null && compareValues(curVal, lastVal) != 0)

rank = count;

tblEl.rows[i].rank = rank;

lastVal = curVal;

count++;

i += incr;

}

var rowEl, cellEl;

var lastRank = 0;

for(i = 0; i < tblEl.rows.length; i++){

rowEl = tblEl.rows[i];

cellEl = rowEl.cells[0];

while(cellEl.lastChild != null)

cellEl.removeChild(cellEl.lastChild);

if(col > 1 && rowEl.rank != lastRank){

cellEl.appendChild(document.createTextNode(rowEl.rank));

lastRank = rowEl.rank;

}

}

}