jquery配置可能なテーブルの実装 code_jquery

Table タグに class="sortable" を設定し、テーブルの ID を設定します。
JQuery によって記述された 2 行のコードがテーブルに追加されます。これらは奇数行と偶数行の色を変更するために使用されます。 >

コードをコピー コードは次のとおりです:

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 = table .rows[0];
}
if (!firstRow) return;

// 最初の行があります。これがヘッダーであると仮定し、その内容をクリック可能なリンクにします。
for (var i=0;ivarセル = firstRow.cells[i];
var txt = ts_getInnerText(セル);
cell.innerHTML = ''onclick="ts_resortTable(this, ' i ');return false;">'
txt '   ;
}
}

function ts_getInnerText(el) {
if (typeof el == "string") return el;
if (typeof el == "未定義") { return el };
if (el.innerText) は el.innerText を返します。 //必要ありませんが、より高速です
var str = "";

var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i switch (cs[i].nodeType) {
ケース 1: //ELEMENT_NODE
str = ts_getInnerText(cs[i ]);
休憩;
ケース 3: //TEXT_NODE
str = cs[i].nodeValue;
休憩;
}
}
文字列を返します。
}

function ts_resortTable(lnk,clid) {
// スパンを取得します
var scan;
for (var ci=0;ciif (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'スパン') スパン = lnk.childNodes[ci];
}
var spantext = 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 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 {
ARROW = ' ↓';
span.setAttribute('sortdir','down');
}

// すでに存在する行を tbody に追加するので、新しい行を作成するのではなく移動します
// sortbottom rows
for (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 = ARROW;
$('#' テーブル ID ' tr:gt(0):even').css("背景色","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;
else
return getParent(el.parentNode, pTagName);
}
function ts_sort_date(a,b) {
// y2k 注: 50 未満の 2 桁の年は 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,'');
return 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 を返します。
if (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 を返します。
if (aa1 を返します。
}


function addEvent(elm, evType, fn, useCapture)
// addEvent および RemoveEvent
// IE5、NS6、および Mozilla のクロスブラウザー イベント処理
// スコット・アンドリュー著
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
true を返します。
} else if (elm.attachEvent){
var r = elm.attachEvent("on" evType, fn);
r を返します;
} else {
alert("ハンドラーを削除できませんでした");
}
}