table 固定显示第一行 & 动态改变table高度
2010-02-19 16:55
411 查看
//
Browser = (function(ua){
var b = {
msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
var vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie = b.msie;
b.ie6 = b.msie && parseInt(b.version, 10) == 6;
b.ie7 = b.msie && parseInt(b.version, 10) == 7;
b.ie8 = b.msie && parseInt(b.version, 10) == 8;
return b;
})(window.navigator.userAgent.toLowerCase());
var obj = {
change : function(o){
var div = document.getElementById("div1");
var idTr = document.getElementById("idTr");
var pos = getElementPos(div);
var height1 = document.body.clientHeight-pos[1]-20;
var height2 = div.children[0].offsetHeight;
if(height1 > height2){
div.style.height = height2 + 20;
}else{
if(height1 > 300){
div.style.height = height1;
}
else{
div.style.height = 300;
}
}
},
changeStyle:function(){
var idTr = document.getElementById("idTr");
if(Browser.ie6 || Browser.ie7){
idTr.style.position = "relative";
idTr.style.top = idTr.offsetParent.scrollTop;
}else{
idTr.style.position = "fixed";
idTr.style.top = idTr.parentNode.parentNode.parentNode.top;
}
}
}
var EventUtil = new Object;
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var oo = function(){
obj.changeStyle();
}
window.onload = function() {
var oDiv = document.getElementById("div1");
EventUtil.addEventHandler(oDiv, "scroll", oo);
}
//得到某一元素的绝对位置,不管该元素嵌套在多复杂的位置里
function getElementPos(obj) {
var left = 0;
var top = 0;
if(obj.x)
{
left= obj.x;
top = obj.y;
}else if(obj.offsetParent)
{
while(obj.offsetParent)
{
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
}
return [left,top];//封装在一个数组里
}
// ]]>
// obj.change();
// ]]>
Browser = (function(ua){
var b = {
msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
var vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie = b.msie;
b.ie6 = b.msie && parseInt(b.version, 10) == 6;
b.ie7 = b.msie && parseInt(b.version, 10) == 7;
b.ie8 = b.msie && parseInt(b.version, 10) == 8;
return b;
})(window.navigator.userAgent.toLowerCase());
var obj = {
change : function(o){
var div = document.getElementById("div1");
var idTr = document.getElementById("idTr");
var pos = getElementPos(div);
var height1 = document.body.clientHeight-pos[1]-20;
var height2 = div.children[0].offsetHeight;
if(height1 > height2){
div.style.height = height2 + 20;
}else{
if(height1 > 300){
div.style.height = height1;
}
else{
div.style.height = 300;
}
}
},
changeStyle:function(){
var idTr = document.getElementById("idTr");
if(Browser.ie6 || Browser.ie7){
idTr.style.position = "relative";
idTr.style.top = idTr.offsetParent.scrollTop;
}else{
idTr.style.position = "fixed";
idTr.style.top = idTr.parentNode.parentNode.parentNode.top;
}
}
}
var EventUtil = new Object;
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var oo = function(){
obj.changeStyle();
}
window.onload = function() {
var oDiv = document.getElementById("div1");
EventUtil.addEventHandler(oDiv, "scroll", oo);
}
//得到某一元素的绝对位置,不管该元素嵌套在多复杂的位置里
function getElementPos(obj) {
var left = 0;
var top = 0;
if(obj.x)
{
left= obj.x;
top = obj.y;
}else if(obj.offsetParent)
{
while(obj.offsetParent)
{
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
}
return [left,top];//封装在一个数组里
}
// ]]>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>table 固定第一行</title>
<script>
Browser = (function(ua){
var b = {
msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
var vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie = b.msie;
b.ie6 = b.msie && parseInt(b.version, 10) == 6;
b.ie7 = b.msie && parseInt(b.version, 10) == 7;
b.ie8 = b.msie && parseInt(b.version, 10) == 8;
return b;
})(window.navigator.userAgent.toLowerCase());
var obj = {
change : function(o){
var div = document.getElementById("div1");
var idTr = document.getElementById("idTr");
var pos = getElementPos(div);
var height1 = document.body.clientHeight-pos[1]-20;
var height2 = div.children[0].offsetHeight;
if(height1 > height2){
div.style.height = height2 + 20;
}else{
if(height1 > 300){
div.style.height = height1;
}
else{
div.style.height = 300;
}
}
},
changeStyle:function(){
var idTr = document.getElementById("idTr");
if(Browser.ie6 || Browser.ie7){
idTr.style.position = "relative";
idTr.style.top = idTr.offsetParent.scrollTop;
}else{
idTr.style.position = "fixed";
idTr.style.top = idTr.parentNode.parentNode.parentNode.top;
}
}
}
var EventUtil = new Object;
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var oo = function(){
obj.changeStyle();
}
window.onload = function() {
var oDiv = document.getElementById("div1");
EventUtil.addEventHandler(oDiv, "scroll", oo);
}
//得到某一元素的绝对位置,不管该元素嵌套在多复杂的位置里
function getElementPos(obj) {
var left = 0;
var top = 0;
if(obj.x)
{
left= obj.x;
top = obj.y;
}else if(obj.offsetParent)
{
while(obj.offsetParent)
{
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
}
return [left,top];//封装在一个数组里
}
</script>
</head>
<body onresize="obj.change()">
<br>
<br><br> <br> <br>
<br> <div style="text-align:center;width:100%;border:1px blue solid;">
<div id="div1" style="margin-right: auto;margin-left: auto;border:1px red solid;height:300;overflow:auto;width:600; scrollbar-face-color:9999ff;">
<table width="800" border=3 cellspacing=0 style="margin-top:-2px;" height=1000>
<TR class="fixedHeaderTr" style="background:navy;color:white;width:800;height:30" id="idTr">
<TD nowrap>Header A</TD>
<TD nowrap>Header B</TD>
<TD nowrap>Header C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD nowrap >
sssss<br>
s</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</table>
</div> </div>
<SCRIPT LANGUAGE="JavaScript">
<!--
obj.change();
//-->
</SCRIPT>
</body>
</html>| Header A | Header B | Header C |
| A | B | sssss s |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
// ]]>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实现table用鼠标改变td的宽度，固定table宽度和高度超过显示点
- 动态改变tableHeaderView的显示隐藏及高度
- 在html中，怎么改变<table><form>在页面显示的位置？
- 显示或隐藏键盘改变tableView高度
- iOS、Xcode监测键盘的显示和隐藏变化，并获得键盘高度，改变tableView的frame和偏移
- iOS、Xcode监测键盘的显示和隐藏变化，并获得键盘高度，改变tableView的frame和偏移
- 【iOS知识学习】_iOS动态改变TableView Cell高度
- 在ListView、ScrollView中动态存在高度不固定的View，高度显示异常
- IOS笔记UI--固定宽度，根据内容动态改变高度
- 当UITableView heightForRowAtIndexPath动态改变高度时 tableview向上滑动会jump 跳的问题
- Webpage has expired 和 动态生成的表Table的第一行固定
- css设置多个img为固定高度显示，不受图片实际尺寸影响而改变大小
- 动态改变cell的高度&beginUpdates和endUpdates-实现UITableView的动画块
- 动态改变tableview的cell的高度
- ios TableView那些事（三十 五）TableView 单选操作使用Autolayout实现UITableView的Cell动态布局和高度动态改变
- ios开发笔记之如何让tableView根据文本内容动态改变cell的高度
- ios TableView那些事（三十 五）TableView 单选操作使用Autolayout实现UITableView的Cell动态布局和高度动态改变
- 显示或隐藏键盘改变tableView高度
- 使用tableHeaderView的时候动态改变高度
- iOS UITableView动态改变tableHeaderView的高度