jquery 可排列的表实现代码

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


代码如下:

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;ti<tbls.length;ti++) {
thisTbl = 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;

// We have a first row: assume it's the header, and make its contents clickable links
for (var i=0;i<firstRow.cells.length;i++) {
var cell = firstRow.cells[i];
var txt = ts_getInnerText(cell);
cell.innerHTML = '<a href="#" class="sortheader" '+
'onclick="ts_resortTable(this, '+i+');return false;">' +
txt+'<span class="sortarrow">   </span></a>';
}
}

function ts_getInnerText(el) {
if (typeof el == "string") return el;
if (typeof el == "undefined") { return el };
if (el.innerText) return el.innerText; //Not needed but it is faster
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;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}
}
return str;
}

function ts_resortTable(lnk,clid) {
// get the span
var span;
for (var ci=0;ci<lnk.childNodes.length;ci++) {
if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
}
var spantext = ts_getInnerText(span);
var td = lnk.parentNode;
var column = clid || td.cellIndex;
var table = getParent(td,'TABLE');
var tableid=$(table).attr("id");

// Work out a type for the column
if (table.rows.length <= 1) return;
var itm = ts_getInnerText(table.rows[1].cells[column]);
sortfn = ts_sort_caseinsensitive;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^[?]/)) sortfn = ts_sort_currency;
if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
SORT_COLUMN_INDEX = column;
var firstRow = new Array();
var newRows = new Array();
for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; }
for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; }

newRows.sort(sortfn);

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

// We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
// don't do sortbottom rows
for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
// do sortbottom rows only
for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);}

// Delete any other arrows there may be showing
var allspans = document.getElementsByTagName("span");
for (var ci=0;ci<allspans.length;ci++) {
if (allspans[ci].className == 'sortarrow') {
if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
allspans[ci].innerHTML = '   ';
}
}
}

span.innerHTML = ARROW;
$('#'+tableid+' tr:gt(0):even').css("background-color","FFF7E8");
$('#'+tableid+' tr:gt(0):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 bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function ts_sort_date(a,b) {
// y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 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(yr) < 50) { yr = '20'+yr; } else { yr = '19'+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) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
dt2 = yr+bb.substr(3,2)+bb.substr(0,2);
}
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 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,'');
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;
return 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) return 0;
if (aa<bb) return -1;
return 1;
}

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) return 0;
if (aa<bb) return -1;
return 1;
}

function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}

(0)

相关推荐

  • jquery 可排列的表实现代码

    在Table标签上设置 class="sortable" 且Table要设置ID. 表中增加了两行代码是JQuery写的.用于给奇偶行变色. 复制代码 代码如下: addEvent(window, "load", sortables_init); var SORT_COLUMN_INDEX; function sortables_init() { // Find all tables with class sortable and make them sortabl

  • python单链表实现代码实例

    链表的定义:链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点都包含结点本身的信息和指向下一个结点的地址.由于每个结点都包含了可以链接起来的地址信息,所以用一个变量就能够访问整个结点序列.也就是说,结点包含两部分信息:一部分用于存储数据元素的值,称为信息域:另一部分用于存储下一个数据元素地址的指针,称为指针域.链表中的第一个结点的地址存储在一个单独的结点中,称为头结点或首结点.链表中的最后一个结点没有后继元素,其指针域为空. python单链表实现代码: 复制代码

  • PHP Array交叉表实现代码

    如果使用sql语句做的话 工作量太大了,于是尝试自己写一个交叉表的类,好二话不说,我们看看代码 复制代码 代码如下: /** * 基本交叉表 * @author hugh * */ class Pivot { private $HORIZONTAL_TOTAL_FIELD = 'total'; private $VERTICAL_TOTAL_FIELD = 'total'; private $data; private $topPivot; private $leftPivot; private

  • 学习python之编写简单乘法口诀表实现代码

    实现代码一. #!/usr/bin/python x,y=9,9 lst=[(x,y,str(y)+'X'+str(x)+'='+str(x*y)) for x in range(1,y+1) for y in range(1,x+1)] for item in lst: print item[2], if(item[0]==item[1]): print '\n' 实现代码二. for i in range(1,10): for j in range(1,i+1): print str(i*j

  • php 小乘法表实现代码

    复制代码 代码如下: <?php for($i=1;$i<10;$i++) { for($j=1;$j<=$i;$j++) { $result = $i*$j; if(strlen($result)==2) { echo "$j*$i=$result"; echo " "; } else { echo "$j*$i=$result"; echo "  "; } } echo "<br />

  • C语言顺序表实现代码排错

    今天本来想写段代码练练手,想法挺好结果,栽了个大跟头,在这个错误上徘徊了4个小时才解决,现在分享出来,给大家提个醒,先贴上代码: 复制代码 代码如下: /******************************************** * 文件名称:sqlist.h * 文件描述:线性表顺序存储演示 * 文件作者:by Wang.J,in 2013.11.16 * 文件版本:1.0 * 修改记录:*********************************************/

  • 插入排序的顺序表实现代码

    复制代码 代码如下: #include<stdio.h>typedef struct { int key;}RecType;typedef struct { RecType R[100+1]; int Length;}SqList; #define N 11//为测试方便,直接输入11个整数void InsertSort(SqList *L){ int i,j; for(i=2;i<=L->Length;i++)  if(L->R[i].key<L->R[i-1]

  • php单链表实现代码分享

    本文实例为大家分享了php单链表的具体代码,供大家参考,具体内容如下 <?php /** * 单链表 */ class Demo { private $id; public $name; public $next; public function __construct ($id = '', $name = '') { $this->id = $id; $this->name = $name; } static public function show ($head) { $cur =

  • Javascript 访问样式表实现代码

    再记录一下 Javascript访问样式表 Javascript可以访问网页中元素的style属性,例如: <div id="main" style="background-color:red"></div> 通过js访问style属性 alert(document.getElementById("main").style.backgroundColor); 通过js改变style属性 document.getElemen

  • C语言 数据结构之链表实现代码

    前言 最近在复习数据结构的相关知识,感觉在初学的时候还是有很多东西没有掌握,不过现在终于算是搞得比较有头绪了,所以就在写出来和大家一起分享! 什么是链表 简单的说,链表就是由多个结点离散分配,彼此通过指针相连,每个结点只有一个前驱结点和后继结点.首节点无前驱结点,为结点无后继结点的一种存储结构. 链表的结构 头结点:链表的第一个有效结点前面的结点,头结点并不存放有效数据,也就是数据域为空,加头结点的主要目的是为了方便链表的操作. 首节点:链表的第一个有效结点,结点包含数据域和指针域. 尾结点:尾

随机推荐