jsp页面表头锁定的问题

JavaScript021

jsp页面表头锁定的问题,第1张

jsp中表头锁定是通过css和js同步控制的：

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" width="100%" >

<tr id="thead">

<td width="9%" align="center">招聘学科</td>

<c:forEach items="${postnames}" var="postname">

<td valign="bottom" align="center">

${postname}

</td>

</c:forEach>

</tr>

<tr id="spacetr">

<td width="9%"></td>

<c:forEach items="${postnames}" var="postname">

<td>

</td>

</c:forEach>

</tr>

<c:forEach items="${shcoolsPostnumbers}" var="schoolPostnumbers">

<tr class="tdata">

<td width="9%" >${schoolPostnumbers.key}</td>

<c:forEach items="${schoolPostnumbers.value}" var="postnumber">

<td align="center">${postnumber} </td>

</c:forEach>

</tr>

</c:forEach>

</table>

</div>

方法<html>

<head>

<meta http-equiv="content-type" content="text/htmlcharset=utf-8">

<META http-equiv="Content-Style-Type" content="text/css">

</head>

<script language=javascript>

var t, n, c

window.onload=function(){

t = document.getElementById("tb")

t.rows[0].style.height="50px" //在这里设置高度

}