스크롤 막대, 고정 제목 및 정렬 기능이 있는 javascript 테이블.

스크롤 막대, 고정 제목 및 정렬 기능이 있는 javascript 테이블._javascript 기술

WBOY

풀어 주다： 2016-05-16 18:41:50

원래의

1113명이 탐색했습니다.

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

//使用要求:
//1.将表格的Class命名为:sorttableHold,
//2.表格放置在一个div中,此div设有overflow属性.
//3.表格要求有ID,div要求有ID
//4.要有JQuery.min.js文件
//5.OK.

addEvent(window, "load", sortables_init);

var SORT_COLUMN_INDEX;

function sortables_init() {
// Find all tables with class sortable and make them sortable
if (!document.getElementsByTagName) return;
tbls = document.getElementsByTagName("table");
for (ti=0;tithisTbl = tbls[ti];
if (((' '+thisTbl.className+' ').indexOf("sorttableHold") != -1) && (thisTbl.id)) {
//initTable(thisTbl.id);
ts_makeSortable(thisTbl);
}
}
}

function ts_makeSortable(table) {
if (table.rows && table.rows.length > 0) {
var firstRow = table.rows[0];
}
if (!firstRow) return;

// We have a first row: assume it's the header, and make its contents clickable links
for (var i=0;ivar cell = firstRow.cells[i];
var txt = ts_getInnerText(cell);
cell.innerHTML = ''onclick="ts_resortTable(this, '+i+');return false;">' +
txt+' ';
}
if(table!=undefined)//分离
{
$('

').insertBefore('#' table.parentNode.parentNode.id);//DIV 생성
var div_title=document.getElementById(table.id 'Title')
var title = table.cloneNode( true)//제목에 모두 복사
for(i = title.rows.length -1;i >0;i--)//제목의 모든 내용을 삭제하고 첫 번째 줄인 제목만 남깁니다.
title.deleteRow(i)
table.deleteRow(0)//GridView의 첫 번째 행(제목)이 삭제되어 내용만 남습니다.
div_title.appendChild(title) // 제목은 div
$("#" div_title.id " table:eq(0)").attr("id",div_title.id "1")
$(table)에 지정됩니다. RemoveAttr("class");
}

}
function ts_getInnerText(el) {
if (typeof el == "string") return el
if (typeof el) == "정의되지 않음") { 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]);
break;
사례 3: //TEXT_NODE
str = cs[i].nodeValue
🎜>}
}
return str;
}

function ts_resortTable(lnk,clid) {
// 범위 가져오기
var
for ( var ci=0;ci< lnk.childNodes.length;ci ) {//제목에서 범위 가져오기
if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span')span = lnk.childNodes[ci];
}
varspantext = ts_getInnerText(span); //제목 범위 내용
var td = lnk.parentNode; >var 열 = clid || td.cellIndex;//열
var tablecurrent = getParent(td,'TABLE');//테이블
var tableid=tablecurrent.id.substring(0,tablecurrent.id. length-6);
var table=document.getElementById(tableid);
// 열의 유형을 계산합니다.
if (table.rows.length <= 1) return; var itm = ts_getInnerText(table.rows[0].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 newRows = new Array() ;
for (i=0;i for (j=0;j< ;table.rows.length;j ) { newRows[j] = table.rows[j] }

newRows.sort(sortfn)

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

// 이미 존재하는 하위 행을 추가합니다. tbody이므로 새 행을 생성하는 대신 이동합니다
// 하단 행 정렬을 수행하지 마세요
for (i=0;i{ if (!newRows[i ].className || (newRows [i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
// 하단 행만 정렬
for (i=0;i{ if (newRows[i].className && (newRows[i].className.indexOf(' sortbottom') != -1 )) table.tBodies[0].appendChild(newRows[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 = ARROW;
$('#' tableid ' tr:even').css("Background-color","FFF7E8")
$ ('#' tableid ' tr :odd').css("Background-color","#CCE8CF");
}

function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko 버그, 대문자여야 함
return el;
else
return getParent(el.parentNode, pTagName);
}
function ts_sort_date(a,b) {
// y2k 참고: 50보다 작은 두 자리 연도는 20XX로 처리됩니다. , 50보다 큰 경우 19XX로 처리됩니다.
aa = ts_getInnerText(a.cells[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 (연도) 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) < 50) { yr = '20' yr; 19' }
dt2 = bb.substr(3,2) bb.substr(0,2)
}
if (dt1==dt2) return 0; dt1return 1
}

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("핸들러를 제거할 수 없습니다.");
}
}