<%@ 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中调用
分享到:
相关推荐
"多列拖拽排序智能滚动"是一种提升用户体验的技术,它允许用户通过拖放操作对多列数据进行排序,同时在拖动过程中,如果接近屏幕边缘,页面会自动滚动,确保用户能持续看到可操作区域。这个功能的实现主要依赖于...
仿淘宝商城table滚动全屏效果。table向上滚动,则显示导航栏和排序bar。如果向下滚动,则隐藏导航栏和排序bar,使表格全屏显示。 参考了YIFullScreenScroll的实现,但是这个有一个问题,就是很难加上排序bar的隐藏...
标题“图片拖动排序支持滚动条联动”涉及的是一个网页或应用中的交互设计技术,它允许用户通过拖放操作来改变图片的顺序,同时滚动条会根据图片位置的变化进行联动,提供流畅的用户体验。这种功能常见于图片管理、...
"Unity实现游戏卡牌滚动效果" Unity实现游戏卡牌滚动效果是指在 Unity 游戏引擎中实现游戏卡牌滚动效果的技术方案。该技术方案主要用于实现游戏卡牌预览效果,通过滚动卡牌来展示游戏卡牌的信息。 Unity实现游戏...
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...
而“table表格排序效果”则是提高用户体验的重要功能,允许用户根据某一列的数据对整个表格进行升序或降序排列。这个“table表格排序效果源码下载”提供了一个实现这一功能的代码示例。 排序功能对于处理大量数据至...
2. CSS3实现:利用CSS3的`transform`和`transition`属性,配合`overflow`属性,可以实现平滑的滚动效果。`transform`用于改变元素的位置,`transition`则定义了动画的过渡效果。 3. 前端框架实现:现代前端框架提供...
标签“jquery横向托拽排序滚动表格”再次强调了这个项目的重点,即jQuery的拖拽功能和表格的滚动效果。jQuery的拖拽插件,如`draggable()`,通常用于创建可拖动的元素,使用户能够通过鼠标操作改变元素的位置。而...
"Bestsellers 图片滚动效果"是 Zen Cart 中的一个特性,它旨在增强用户体验,展示最受欢迎或销量最高的商品,通过动态滚动的方式吸引用户的注意力。 在 Zen Cart 的 Bestsellers 图片滚动效果中,系统会自动收集...
在这个"仿excle表格排序效果"的项目中,我们将探讨如何实现点击表头进行按列排序的功能,并结合`listview`这一组件来构建类似的数据展示。 首先,我们需要理解表格排序的基本原理。在Excel中,用户可以点击列标题对...
实现有限制的卡牌左右滚动效果,利用Unity Scroll View组件结合DOTween插件实现。 效果为多个图片从中心点往右依次有大小缩放及层级排序,然后有一段自动移动效果,紧接着是手动控制移动效果。 压缩文件为效果图和...
这个项目旨在实现一个功能齐全、用户体验良好的好友列表界面,其中包括搜索、滚动以及按首字母排序等特性。以下是关于这个项目的详细知识点: 1. **ListView与RecyclerView**: - 为了实现好友列表的展示,开发者...
在Android应用开发中,实现类似Google Keep的拖动排序效果是一项常见的需求,它极大地提升了用户交互体验。这个压缩包文件“Android 类google keep拖动排序效果.zip”包含了一个示例项目,名为...
为了改变滚动条的视觉效果,我们需要在`CListCtrl` 上屏蔽原有的滚动条,然后手动添加一个独立的滚动条控件,并与`CListCtrl` 进行交互,以此来控制列表的滚动。 首先,我们需要禁用`CListCtrl` 的内置滚动条。这...
此资源“CSS3实现的底部带滚动云彩效果的网站登录页面特效源码”是一个示例,展示了如何利用CSS3的特性来创建一个引人入胜的用户体验。这个登录页面的独特之处在于其底部的滚动云彩效果,这不仅增加了页面的动态感,...
在编程领域,易语言是一种基于汉语词汇的编程语言,它以直观、易学的特点深受初学者和...在实际编程过程中,可以根据具体需求进行更多的定制,例如自定义滚动条样式、响应速度等,提升应用程序的视觉效果和交互体验。
在“类似android联系人主界面ListView的滚动效果”这个示例中,我们关注的是如何实现一个类似Android系统联系人应用中字母分段的滚动效果。这种效果使得用户在滚动列表时,可以快速定位到特定的字母部分,提升了用户...
"仿通讯录效果,字母检索,排序"这个项目是针对这一需求的实现,它旨在帮助开发者理解和掌握如何在自己的应用程序中添加这样的功能。下面将详细阐述相关知识点。 1. **字母检索**: 字母检索,也被称为快速索引或...
本资源提供了一个完整的通讯录应用源代码,具有按首字母排序的功能,并附带了实际运行的效果图,对于学习和理解Android开发的通讯录功能有极大的帮助。 首先,通讯录应用的核心是数据管理。在Android中,数据通常...
在这个“js特效网站公告滚动”中,我们主要探讨的是如何使用JavaScript来实现一个功能强大的公告滚动效果,这个效果通常会出现在网站的首页或者重要位置,用于展示最新的通知、活动或者其他重要的信息。 首先,公告...