筚路蓝缕

不因成就而狂妄、不因失落而气馁、不因欲望而沉重、不因嫉妒而困扰

Javascript

Javascript使表格数据排序

Venlentine 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>sort table</title>
<style type="text/css">
a {
	color:#000000;
	font-weight:bold;
	text-decoration:none;
}
/* Sortable tables */ table.sortable a.sortheader {
	background-color:#eee;
	color:#666666;
	font-weight:bold;
	text-decoration:none;
	display:block;
}
table.sortable span.sortarrow {
	color:black;
	text-decoration:none;
}
</style>
<script language="javascript">
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');
	// 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;
	}

	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");
		}
	}
</script>
</head>
<body>
<p>
	点击标题排序
</p>
<table width="481" border="1" cellpadding="0" cellspacing="3" id="mytable" class="sortable">
<tbody>
<tr>
	<th width="165">
		Name
	</th>
	<th width="101">
		Salary
	</th>
	<th width="101" align="center">
		Extension
	</th>
	<th width="99" align="center">
		Start date
	</th>
</tr>
<tr>
	<td>
		Bloggs,Fred
	</td>
	<td>
		$12000.00
	</td>
	<td align="center">
		1353
	</td>
	<td align="center">
		18/08/2003
	</td>
</tr>
<tr>
	<td>
		Turvey,Kevin
	</td>
	<td>
		$191200.00
	</td>
	<td align="center">
		2342
	</td>
	<td align="center">
		02/05/1979
	</td>
</tr>
<tr>
	<td>
		Mbogo,Arnold
	</td>
	<td>
		$32010.12
	</td>
	<td align="center">
		2755
	</td>
	<td align="center">
		09/08/1998
	</td>
</tr>
<tr>
	<td>
		Shakespeare,Bill
	</td>
	<td>
		$122000.00
	</td>
	<td align="center">
		3211
	</td>
	<td align="center">
		12/11/1961
	</td>
</tr>
<tr>
	<td>
		Shakespeare,Hamnet
	</td>
	<td>
		$9000
	</td>
	<td align="center">
		9005
	</td>
	<td align="center">
		01/01/2002
	</td>
</tr>
<tr>
	<td>
		Fitz,Marvin
	</td>
	<td>
		$3300
	</td>
	<td align="center">
		5554
	</td>
	<td align="center">
		22/05/1995
	</td>
</tr>
</tbody>
</table>
</body>
</html>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部