滚动排序效果
<%@ page language="java" import="java.util.*" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%>
<%@page
import="com.szjz.model.FileBean,javax.faces.context.FacesContext,javax.servlet.http.HttpSession"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<SCRIPT language=JavaScript>
///////////////////////////////////////////////tablesort.js
var dom = (document.getElementsByTagName) ? true : false;
var ie5 = (document.getElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;
if (ie5 || dom)
initSortTable();
function initSortTable() {
arrowUp =document.createElement("SPAN");
var tn = document.createTextNode("↓");
arrowUp.appendChild(tn);
arrowUp.className = "arrow";
arrowDown = document.createElement("SPAN");
var tn = document.createTextNode("↑");
arrowDown.appendChild(tn);
arrowDown.className = "arrow";
}
function sortTable(tableNode, nCol, bDesc, sType) {
var tBody =tableNode.tBodies[0];
var trs = tBody.rows;
var a = new Array();
for (var i=0; i<trs.length; i++) {
a[i] =trs[i];
}
a.sort(compareByColumn(nCol,bDesc,sType));
for (var i=0; i<a.length; i++) {
tBody.appendChild(a[i]);
}
}
function CaseInsensitiveString(s) {
return String(s).toUpperCase();
}
function parseDate(s) {
return Date.parse(s.replace(/\-/g, '/'));
}
function toNumber(s) {
return Number(s.replace(/[^0-9\.]/g, ""));
}
function compareByColumn(nCol, bDescending, sType) {
var c = nCol;
var d = bDescending;
var fTypeCast = String;
if (sType == "Number")
fTypeCast = Number;
else if (sType == "Date")
fTypeCast = parseDate;
else if (sType == "CaseInsensitiveString")
fTypeCast = CaseInsensitiveString;
return function (n1, n2) {
if (fTypeCast(getInnerText(n1.cells[c]))< fTypeCast(getInnerText(n2.cells[c])))
return d ? -1 : +1;
if (fTypeCast(getInnerText(n1.cells[c])) >fTypeCast(getInnerText(n2.cells[c])))
return d ? +1 : -1;
return 0;
};
}
function sortColumn(e) {
var tmp, el,tHeadParent;
if (ie5)
tmp = e.srcElement;
else if (dom)
tmp = e.target;
tHeadParent = getParent(tmp, "THEAD");
el = getParent(tmp, "TD");
if (tHeadParent == null)
return;
if (el != null) {
var p =el.parentNode;
var i;
if (el._descending) // catch the null
el._descending= false;
else
el._descending= true;
if (tHeadParent.arrow != null) {
if (tHeadParent.arrow.parentNode!= el) {
tHeadParent.arrow.parentNode._descending= null;
}
tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
}
if (el._descending)
tHeadParent.arrow = arrowDown.cloneNode(true);
else
tHeadParent.arrow= arrowUp.cloneNode(true);
el.appendChild(tHeadParent.arrow);
// get theindex of the td
for (i=0; i<p.cells.length; i++) {
if (p.cells[i]== el) break;
}
var table =getParent(el, "TABLE");
// can'tfail
sortTable(table,i,el._descending,el.getAttribute("type"));
}
}
function getInnerText(el) {
if (ie5) return el.innerText; //Not needed but it is faster
var str = "";
for (var i=0; i<el.childNodes.length; i++) {
switch (el.childNodes.item(i).nodeType) {
case 1: //ELEMENT_NODE
str +=getInnerText(el.childNodes.item(i));
break;
case 3: //TEXT_NODE
str +=el.childNodes.item(i).nodeValue;
break;
}
}
return str;
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() ==pTagName.toLowerCase())
return el;
else
return getParent(el.parentNode, pTagName);
}
</SCRIPT>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>查询车次:k907</title>
</head>
<body>
<TABLE onclick=sortColumn(event) width="98%" style="border-collapse:collapse" bordercolor="#B4B4B4"cellspacing="0" border="1">
<THEAD><tr>
<td bgcolor="#089CCE"align="center" style="color:#FFFFFF"> 车次</td>
<td bgcolor="#089CCE"align="center" style="color:#FFFFFF">类型</td>
</tr>
</THEAD>
<TR onmouseout="this.style.background='#FFFFFF'" onmouseover="this.style.background='#BDDFFF'">
<td align="center">K906/K907</td>
<td align="center">空调快速 </td>
</tr>
<TR onmouseout="this.style.background='#FFFFFF'" onmouseover="this.style.background='#BDDFFF'">
<td align="center">K9079</td>
<td align="center">快速 </td>
</tr>
</table>
</body>
</html>
显示选中条的效果
<script language="javascript" type="text/javascript">
//用颜色显示一条信息
function change()
{
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase()== "td")
{
var oTr =oObj.parentNode;
for(var i=1; i<document.all.tb1.rows.length; i++)
{
document.all.tb1.rows[i].style.backgroundColor= "";
document.all.tb1.rows[i].tag= false; // tb1为表格的名称
}
oTr.style.backgroundColor = "#6699FF";
oTr.tag= true;
}
}
</script>
<tr class="yi_hang_9" onClick="change()"> //在每行的Tr中调用
