jquery 可排列的表实现代码_jquery

在Table标签上设置 class="sortable" 且Table要设置ID.
表中增加了两行代码是JQuery写的.用于给奇偶行变色.

复制代码 代码如下:

addEvent(window, "load", sortables_init);

var SORT_COLUMN_INDEX;

function sortables_init() {
// 查找所有具有 sortable 类的表，并使它们可排序
if (!document.getElementsByTagName) return;
tbls = document.getElementsByTagName("table");
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);
cell.innerHTML = ''onclick="ts_resortTable(this, ' i ');return false;">'
txt ';   ';
}
}

function ts_getInnerText(el) {
if (typeof el == "string") return el;
if (typeof el == "undefined") { return el };
if (el.innerText) return el.innerText; //不需要，但更快
var str = "";

var cs = el.childNodes;
var l = cs.length;
for (var i = 0; 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) {
// 获取跨度
var span;
for (var ci=0;ciif (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == ' span') span = 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 = 列；
varfirstRow = new Array();
var newRows = new Array();
for (i=0;ifor (j=1;j
newRows.sort(sortfn);

if (span.getAttribute("sortdir") == '向下') {
ARROW = '  ↑';
newRows.reverse();
span.setAttribute('sortdir','up');
} 其他 {
箭头 = '  ↓';
span.setAttribute('sortdir','down');
}

// 我们将已经存在的子行追加到 tbody 中，因此它会移动它们而不是创建新的
// 不要对底部行进行排序
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;
$('#' tableid ' tr:gt(0):even').css("背景颜色","FFF7E8");
$('#' tableid ' 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 bug，应该是大写
return el;
else
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 = yr 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 = yr bb.substr(3,2) bb.substr(0,2);
}
if (dt1==dt2) 返回 0;
if (dt1返回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);
}

函数 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；
}

函数 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;
如果 (aa返回1；
}

函数 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;
如果 (aa返回1；
}


function addEvent(elm, evType, fn, useCapture)
// addEvent 和 removeEvent
// IE5、NS6 和 Mozilla 的跨浏览器事件处理
// 作者：斯科特·安德鲁
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
返回真；
} else if (elm.attachEvent){
var r = elm.attachEvent("on" evType, fn);
返回r；
} else {
alert("无法删除处理程序");
}
}