jsp页面表头锁定的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsp页面表头锁定的问题相关的知识，希望对你有一定的参考价值。
<div class="autoWidth">
<table class="table table-striped table-bordered" id="lawsDataReportTable">
<thead>
</thead>
</table>
</div>
如何保证滚动条下拉时，表头能够锁定在页面上，也就是不管数据有多少行，下来滚动条时表头总能在第一行固定。
1、css写法如下：
<style type="text/css">
*
padding:0px;
margin: 0px;
#thead
/*固定表头*/
position:fixed;
/* 表头显示层次高于表体，防止空白行和表头重合时出现重影*/
z-index:2;
background:#ECECFF;
#spacetr /* 空白的tr 用来填补表头遮盖的数据*/
position:relative;
z-index:1;
.tdata /* 显示表格数据的tr */
position:relative;
z-index:1;
</style>
2、js写法如下：
$(function()
$("#spacetr").css("height",$("#thead").css("height"));
//将空白行的高度设置为和表头等高,使被遮挡的数据刚好下移表头高度的距离
);
3、jsp代码如下：
<div style="width:100%">
<%--<img src="$pageContext.request.contextPath/images/post_head.jpg"/> --%>
<table id="table" border="1px gray solid " cellspacing="0" cellpadding="0" >
<tr id="thead">
<td align="center">招聘学科</td>
<c:forEach items="$postnames" var="postname">
<td valign="bottom" align="center">
$postname
</td>
</c:forEach>
</tr>
<tr id="spacetr">
<td ></td>
<c:forEach items="$postnames" var="postname">
<td>
</td>
</c:forEach>
</tr>
<c:forEach items="$shcoolsPostnumbers" var="schoolPostnumbers">
<tr class="tdata">
<td >$schoolPostnumbers.key</td>
<c:forEach items="$schoolPostnumbers.value" var="postnumber">
<td align="center"> $postnumber </td>
</c:forEach>
</tr>
</c:forEach>
</table>
</div> 参考技术A
给你写个固定表头的例子，固定表尾的就当是课堂练习，希望你能举一反三：
<HEAD>
<TITLE> JS Example</TITLE>
<style type='text/css'>
tr.locktop
position:relative;
top:expression((this.offsetParent.scrollTop>this.parentElement.parentElement.offsetTop?this.offsetParent.scrollTop-this.parentElement.parentElement.offsetTop-1:0)-1);
</style>
</HEAD>
<BODY>
<!--表头前面的内容，这些是可以滚出屏幕的，只有表头锁定。-->
<table id=pol_table_list cellspacing=0>
<tr class=locktop><th>表头
<tr><td>1
<tr><td>2
<tr><td>3
<tr><td>4
<tr><td>5
<tr><td>6
<tr><td>7
<tr><td>8
<tr><td>9
<tr><td>10
</table>
</BODY>
</HTML>
把浏览器窗口调得很小，才能看到效果，向下滚动的时候表头是固定的
JSP点击表头排序
table.html
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="tablesortT.js"></script>
<link type="text/css" rel="StyleSheet" href="tablesort.css" />
<head>
<title>点击表头排序</title>
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial, Sans-Serif;
font: Message-Box;
}
code {
font-size: 1em;
}
</style>
</head>
<body>
<table id="MyHeadTab" cellspacing="0" onclick="sortColumn(event)">
<thead>
<tr>
<td><a href="#">StringName</a></td>
<td title="CaseInsensitiveString"> <a href="#">String</a></td>
<td> <a href="#">Number</a></td>
<td> <a href="#">Date</a></td>
<td> <a href="#">No Sort</a></td>
</tr>
</thead>
<tbody>
<tr>
<td>apple</td>
<td>Strawberry</td>
<td>45</td>
<td>2001-03-13</td>
<td>Item 0</td>
</tr>
<tr>
<td>Banana</td>
<td>orange</td>
<td>7698</td>
<td>1789-07-14</td>
<td>Item 1</td>
</tr>
<tr>
<td>orange</td>
<td>Banana</td>
<td>4546</td>
<td>1949-07-04</td>
<td>Item 2</td>
</tr>
<tr>
<td>Strawberry</td>
<td>apple</td>
<td>987</td>
<td>1975-08-19</td>
<td>Item 3</td>
</tr>
<tr>
<td>Pear</td>
<td>blueberry</td>
<td>98743</td>
<td>2001-01-01</td>
<td>Item 4</td>
</tr>
<tr>
<td>blueberry</td>
<td>Pear</td>
<td>4</td>
<td>2001-04-18</td>
<td>Item 5</td>
</tr>
</tbody>
</table>
</body>
</html>
tablesort.css
tr{background: window;}
td{color: windowtext; font: menu; padding: 1px; padding-left: 5px; padding-right: 5px;
border-right: 1px solid buttonshadow;
border-bottom: 1px solid buttonshadow;
}
table {border-top: 1px solid buttonshadow;
border-left: 1px solid buttonshadow;
border-right: 1px solid buttonhighlight;
border-bottom: 1px solid buttonhighlight;
}
thead td {background: buttonface; font: menu; border: 1px outset white;
padding-top: 0; padding: bottom: 0;
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-right: 1px solid buttonshadow;
border-bottom: 1px solid buttonshadow;
height: 16px;
}
thead .arrow{font-family: webdings; color: black; padding: 0; font-size: 10px;
height: 11px; width: 10px; overflow: hidden;
margin-bottom: 5; margin-top: -3; padding: 0; padding-top: 0; padding-bottom: 2;}
/*nice vertical positioning :-) */
tablesortT.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("5");
arrowUp.appendChild(tn);
arrowUp.className = "arrow";
arrowDown = document.createElement("SPAN");
var tn = document.createTextNode("6");
arrowDown.appendChild(tn);
arrowDown.className = "arrow";
}
function sortTable(tableNode, nCol, bDesc, sType) {
var tBody = tableNode.tBodies[0];
var trs = tBody.rows;
var trl= trs.length;
var a = new Array();
for (var i = 0; i < trl; i++) {
a[i] = trs[i];
}
var start = new Date;
window.status = "Sorting data...";
a.sort(compareByColumn(nCol,bDesc,sType));
window.status = "Sorting data done";
for (var i = 0; i < trl; i++) {
tBody.appendChild(a[i]);
window.status = "Updating row " + (i + 1) + " of " + trl +
" (Time spent: " + (new Date - start) + "ms)";
}
// check for onsort
if (typeof tableNode.onsort == "string")
tableNode.onsort = new Function("", tableNode.onsort);
if (typeof tableNode.onsort == "function")
tableNode.onsort();
}
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;
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 sortColumnWithHold(e) {
// find table element
var el = ie5 ? e.srcElement : e.target;
var table = getParent(el, "TABLE");
// backup old cursor and onclick
var oldCursor = table.style.cursor;
var oldClick = table.onclick;
// change cursor and onclick
table.style.cursor = "wait";
table.onclick = null;
// the event object is destroyed after this thread but we only need
// the srcElement and/or the target
var fakeEvent = {srcElement : e.srcElement, target : e.target};
// call sortColumn in a new thread to allow the ui thread to be updated
// with the cursor/onclick
window.setTimeout(function () {
sortColumn(fakeEvent);
// once done resore cursor and onclick
table.style.cursor = oldCursor;
table.onclick = oldClick;
}, 100);
}
function sortColumn(e) {
var tmp = e.target ? e.target : e.srcElement;
var tHeadParent = getParent(tmp, "THEAD");
var el = getParent(tmp, "TD");
if (tHeadParent == null)
return;
if (el != null) {
var p = el.parentNode;
var i;
// typecast to Boolean
el._descending = !Boolean(el._descending);
if (tHeadParent.arrow != null) {
if (tHeadParent.arrow.parentNode != el) {
tHeadParent.arrow.parentNode._descending = null; //reset sort order
}
tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
}
if (el._descending)
tHeadParent.arrow = arrowUp.cloneNode(true);
else
tHeadParent.arrow = arrowDown.cloneNode(true);
el.appendChild(tHeadParent.arrow);
// get the index of the td
var cells = p.cells;
var l = cells.length;
for (i = 0; i < l; i++) {
if (cells[i] == el) break;
}
var table = getParent(el, "TABLE");
// can‘t fail
sortTable(table,i,el._descending, el.getAttribute("type"));
}
}
function getInnerText(el) {
if (ie5) 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 += getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}
}
return str;
}
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);
}
以上是关于jsp页面表头锁定的问题的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Spring Security 在 login.jsp 页面显示登录错误消息？
jsp页面中，一个table数据有很多列，很多行，有上下左右滚动条，怎样可以表格数据拖动的时候，标头不动？