.net中固定行和列的通用模板
.net中<table></table>算是用到频率非常高的标签了,那么用<table></table>标签建立的表格如果想要想Excel表那样可以固定行和列要则样实现呢?在别处找到了这个固定行和列的方法,我把它稍作改动,编辑成为一个通用的模板,供大家参考使用。
<head runat="server">
<title>固定行和列</title>
<script type ="text/javascript">
function syncscroll(obj) {
x.innerHtml = obj.scrollLeft;
y.innerHtml = obj.scrollTop;
scroll1.children[0].style.position = "relative";
scroll2.children[0].style.position = "relative";
scroll1.children[0].style.left = "-" + obj.scrollLeft;
scroll2.children[0].style.top = "-" + obj.scrollTop;
}
</script>
</head>
<body>
<form id="form1" runat="server" >
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<%--左上begin--%>
<td>
<div>
<%--此div中添加要固定行和列的交汇处--%>
</div>
</td>
<%--右上--%>
<td>
<div id="scroll1" style="width:450;overflow:hidden;" runat="server">
</div>
</td>
</tr>
<tr>
<%--左下--%>
<td>
<div id="scroll2" runat="server" style="height:150px;overflow-y:hidden;overflow-x:scroll">
</div>
</td>
<%--右下--%>
<td>
<div id="scroll3" runat="server" style="width:450px;height:150px;overflow:scroll;" onscroll="javascript:syncscroll(this)">
</div>
</td>
</tr>
</table>
<p id="y"></p>
<p id="x"></p>
</body>
</html>
只要把左上、右上、左下、右下的内容分别放到4个div中就可以是想行和列的固定啦!
注:在有些浏览器中不支持此方法,建议使用IE浏览器。