jquery 정렬 가능한 테이블 구현 code_jquery

테이블 태그에 class="sortable"을 설정하고 테이블의 ID를 설정합니다.
JQuery로 작성된 두 줄의 코드가 홀수 행과 짝수 행의 색상을 변경하는 데 사용됩니다. >

코드 복사 코드는 다음과 같습니다.

addEvent(window, "load", sortables_init);

var SORT_COLUMN_INDEX;

function sortables_init() {
// sortable 클래스가 있는 모든 테이블을 찾아 정렬 가능하게 만듭니다.
if (!document.getElementsByTagName) return;
tbls = document.getElementsByTagName("테이블");
for (ti=0;tithisTbl = tbls[ti];
if (((' ' thisTbl.className ' ').indexOf("sortable") != -1) && (thisTbl.id)) {
//initTable(thisTbl.id);
ts_makeSortable(thisTbl);
}
}
}

function ts_makeSortable(table) {
if (table.rows && table.rows.length > 0) {
var firstRow = 테이블 .rows[0];
}
if (!firstRow) 반환;

// 첫 번째 행이 있습니다. 헤더라고 가정하고 내용을 클릭할 수 있는 링크로 만듭니다.
for (var i=0;ivar 셀 = firstRow.cells[i];
var txt = ts_getInnerText(cell);
cell.innerHTML = ''onclick="ts_resortTable(this, ' i ');return false;">'
txt '   ';
}
}

function ts_getInnerText(el) {
if (typeof el == "string") return el;
if (typeof el == "undefine") { return el };
if (el.innerText) return el.innerText; //필요하지 않지만 더 빠릅니다.
var str = "";

var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i ) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
str = ts_getInnerText(cs[i ]);
휴식;
사례 3: //TEXT_NODE
str = cs[i].nodeValue;
휴식;
}
}
return str;
}

function ts_resortTable(lnk,clid) {
// 범위 가져오기
varspan;
for (var ci=0;ciif (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == ' 스팬') 스팬 = lnk.childNodes[ci];
}
varspantext = ts_getInnerText(span);
var td = lnk.parentNode;
var 열 = clid || td.cellIndex;
var table = getParent(td,'TABLE');
var tableid=$(table).attr("id");

// 열의 유형을 계산합니다.
if (table.rows.length <= 1) return;
var itm = ts_getInnerText(table.rows[1].cells[column]);
sortfn = ts_sort_caseinsensitive;
if (itm.match(/^dd[/-]dd[/-]dddd$/)) sortfn = ts_sort_date;
if (itm.match(/^dd[/-]dd[/-]dd$/)) sortfn = ts_sort_date;
if (itm.match(/^[?]/)) sortfn = ts_sort_currency;
if (itm.match(/^[d.] $/)) sortfn = ts_sort_numeric;
SORT_COLUMN_INDEX = 열;
var firstRow = new Array();
var newRows = new Array();
for (i=0;ifor (j=1;j
newRows.sort(sortfn);

if (span.getAttribute("sortdir") == 'down') {
ARROW = '  ↑';
newRows.reverse();
span.setAttribute('sortdir','up');
} else {
화살표 = '  ↓';
span.setAttribute('sortdir','down');
}

// 이미 존재하는 하위 행을 tbody에 추가하므로 새 행을 생성하는 대신 이동합니다.
// (i=0에 대해 하단 행 정렬을 수행하지 않음
;i// 하단 행만 정렬
for (i=0;i
// 다른 화살표 삭제
var allspans = document.getElementsByTagName("span");이 표시될 수 있습니다.
for (var ci=0;ciif (allspans[ci].className == 'sortarrow') {
if (getParent(allspans[ci]," table") == getParent(lnk,"table")) { // 우리와 같은 테이블에 있나요?
allspans[ci].innerHTML = '   ';
}
}
}

span.innerHTML = 화살표;
$('#' tableid ' tr:gt(0):even').css("Background-color","FFF7E8");
$('#' 테이블 ID ' tr:gt(0):odd').css("배경색","#CCE8CF");
}

function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko 버그, 대문자여야 함
return el;
그렇지 않으면
return getParent(el.parentNode, pTagName);
}
function ts_sort_date(a,b) {
// y2k 참고: 50보다 작은 두 자리 연도는 20XX로 처리되고, 50보다 큰 연도는 19XX로 처리됩니다.
aa = ts_getInnerText(a. 셀[SORT_COLUMN_INDEX]);
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if (aa.length == 10) {
dt1 = aa.substr(6,4) aa.substr(3,2) aa.substr(0,2);
} else {
yr = aa.substr(6,2);
if (parseInt(yr) dt1 = 년 aa.substr(3,2) aa.substr(0,2);
}
if (bb.length == 10) {
dt2 = bb.substr(6,4) bb.substr(3,2) bb.substr(0,2);
} else {
yr = bb.substr(6,2);
if (parseInt(yr) dt2 = 년 bb.substr(3,2) bb.substr(0,2);
}
if (dt1==dt2) 반환 0;
if (dt11을 반환합니다.
}

function ts_sort_currency(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
parseFloat(aa) 반환 -parseFloat(bb);
}

function ts_sort_numeric(a,b) {
aa =parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
if (isNaN(aa)) aa = 0;
bb =parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
if (isNaN(bb)) bb = 0;
aa-bb를 반환합니다.
}

function ts_sort_caseinsensitive(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
if (aa==bb) 반환 0;
(aa1을 반환합니다.
}

function ts_sort_default(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if (aa==bb) 반환 0;
(aa1을 반환합니다.
}


function addEvent(elm, evType, fn, useCapture)
// addEvent 및 RemoveEvent
// IE5, NS6 및 Mozilla에 대한 크로스 브라우저 이벤트 처리
// 작성자: Scott Andrew
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
참을 반환합니다.
} else if (elm.attachEvent){
var r = elm.attachEvent("on" evType, fn);
r을 반환;
} else {
alert("핸들러를 제거할 수 없습니다.");
}
}