<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>固定表格标题和列_ZY</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
table{
width:800px;
font-size:12px;
border-collapse:collapse;
border:1px solid #c4c4c4;
text-align:center;
}
table th{
text-align:center;
line-height:27px;
border:1px solid #c4c4c4;
background-color:#F5F5F5;
}
table td{
width:50px;
color:#777;
line-height:25px;
height:25px;
border:1px solid #c4c4c4;
}
.statistics-div {
position: absolute;
width: 55%;
height: 60%;
overflow: hidden;
z-index: 9;
}
.statistics-table {
font-family: '微软雅黑';
font-size: 12px;
width: 1700px;
border-collapse: collapse;
text-align: center;
border: 1px solid #DAD8FF;
}
.statistics-table td {
line-height: 1.7em;
margin: auto;
width: 150px;
border: 1px solid #DAD8FF;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function fixTable(tableDivId, tableId, columnNum, headNum){
var tableDiv = $("#"+tableDivId);
var oldTable = $("#"+tableId);
tableDiv.empty();
var tableDataDiv = $('<div id="'+tableId+'DataDiv"></div>');
var tableFixDiv = $('<div id="'+tableId+'FixDiv"></div>');
var tableHeadDiv = $('<div id="'+tableId+'tableHeadDiv"></div>');
var tableColumnDiv = $('<div id="'+tableId+'tableColumnDiv"></div>');
tableDataDiv.appendTo(tableDiv);
tableFixDiv.appendTo(tableDiv);
tableHeadDiv.appendTo(tableDiv);
tableColumnDiv.appendTo(tableDiv);
tableDataDiv.append(oldTable);
var fixTableClone = oldTable.clone(true);
tableFixDiv.append(fixTableClone);
var headTableClone = oldTable.clone(true);
tableHeadDiv.append(headTableClone);
var columnTableClone = oldTable.clone(true);
tableColumnDiv.append(columnTableClone);
tableDiv.find("table").each(function(){
$(this).css("margin", "0");
});
var headHeight = tableHeadDiv.find("table tr").height();
var headTdRowSpan = tableHeadDiv.find("table tr td:first").get(0).rowSpan;
if($.browser.msie && $.browser.version == "8.0" && headTdRowSpan > 1){
headHeight = headHeight / headTdRowSpan;
}
headHeight = headHeight * headNum;
headHeight += 2;
if($.browser.msie && $.browser.version == "7.0"){
headHeight += 4;
}
tableFixDiv.css("height", headHeight);
tableHeadDiv.css("height", headHeight);
var ColumnsWidth = 0;
var ColumnsNumber = 0;
tableColumnDiv.find("table tr:last td:lt(" + columnNum + ")").each(function () {
ColumnsWidth += $(this).outerWidth(true);
ColumnsNumber++;
});
ColumnsWidth += 2;
if ($.browser.msie) {
switch ($.browser.version) {
case "7.0":
if (ColumnsNumber >= 3) ColumnsWidth--;
break;
case "8.0":
if (ColumnsNumber >= 2) ColumnsWidth--;
break;
}
}
tableFixDiv.css("width", ColumnsWidth);
tableColumnDiv.css("width", ColumnsWidth);
tableDataDiv.scroll(function(){
tableHeadDiv.scrollLeft(tableDataDiv.scrollLeft());
tableColumnDiv.scrollTop(tableDataDiv.scrollTop());
});
var height = oldTable.width() > tableDiv.width() ? tableDiv.height() - 16.8 : tableDiv.height();
var width = oldTable.height() > tableDiv.height() ? tableDiv.width() - 17 : tableDiv.width();
height = (height/tableDiv.height()) * 100 + "%";
width = (width/tableDiv.width()) * 100 + "%";
tableDataDiv.css({width:"100%", "height":"100%", "overflow":"auto", "position":"absolute", "left":"0px", "top":"0px", "z-index":"10"});
tableColumnDiv.css({"height":height, "overflow":"hidden", "position":"absolute", "left":"0px", "top":"0px", "z-index":"20", "background-color":"#F0F0F0"});
tableHeadDiv.css({"width": width, "overflow":"hidden", "position":"absolute", "left":"0px", "top":"0px", "z-index":"30", "background-color":"#F0F0F0"});
tableFixDiv.css({"overflow":"hidden", "position":"absolute", "left":"0px", "top":"0px", "z-index":"40", "background-color":"#F0F0F0"});
//随窗口的放大缩小来改变百分比大小
$(window).resize(function(){
height = oldTable.width() > tableDiv.width() ? tableDiv.height() - 16.8 : tableDiv.height();
width = oldTable.height() > tableDiv.height() ? tableDiv.width() - 17 : tableDiv.width();
height = (height/tableDiv.height()) * 100 + "%";
width = (width/tableDiv.width()) * 100 + "%";
tableColumnDiv.css("height", height);
tableHeadDiv.css("width", width);
});
tableDataDiv.offset(tableDiv.offset());
tableColumnDiv.offset(tableDiv.offset());
tableHeadDiv.offset(tableDiv.offset());
tableFixDiv.offset(tableDiv.offset());
}
$(document).ready(function () {
fixTable("tabDiv", "tab1", 1, 2);
});
</script>
</head>
<body>
<div id="tabDiv" class="statistics-div">
<table id="tab1" class="statistics-table">
<tr>
<td>当前访问量</td>
<td>之前访问量</td>
<td>环比(%)</td>
<td>语音渠道</td>
<td>移动互联网渠道渠道</td>
<td>三渠道占比(%)</td>
<td>当年累计访问量</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
jquery 固定表格标题和列
4星 · 超过85%的资源 需积分: 27 145 浏览量
2012-08-20
18:06:05
上传
评论
收藏 34KB RAR 举报 
js固定表格标题和列.rar （2个子文件） 
js固定表格标题和列 
aScoll_2.html 12KB js 
jquery-1.7.2.min.js 93KB资源评论
zp06192014-04-23谢谢 比较好用- wenyan13142013-02-21谢谢 比较好用
- pergod2012-09-26好用是好用，就是数据量过大的时候，会卡死
