table 动态高度和固定第一行 -

kblade

浏览: 5735 次
性别:
来自: 大连

最近访客更多访客>>

nice_really

33433650

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2)

社区版块

存档分类

2010-02 ( 2)
更多存档...

table 动态高度和固定第一行

Chrome C#C++C OO

固定第一行，使用javascript 操作层

<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>

分享到：