JavaScript 테이블 행 위치 지정 효과_javascript 기술

지난번에 테이블 정렬을 하면서 테이블에 대한 이해를 좀 얻었는데, 이번에 좀 더 자세히 알아보고 테이블이 너무 복잡하다는 걸 알게 됐어요.
아직 이 효과를 뭐라고 부르는지 모르겠습니다. 그냥 행 위치 지정이라고 부르겠습니다. 원래는 열 위치 지정을 하고 싶었는데 아직은 시간이 나면 해봐야겠습니다.
프로그램 원리
초기 요구 사항은 스크롤할 때 시계의 헤드 부분이 항상 헤드에 고정될 수 있어야 한다는 것입니다. 달성해야 할 핵심은 tr의 위치를 ​​가능하게 하는 것입니다.
가장 먼저 떠오르는 것은 tr에 대한 상대 설정을 설정하고 ie6/7에서 다음 코드를 테스트하는 것입니다.

<table cellpadding="5" cellspacing="0" border="1" width="100"> <tr style="position:relative; left:100px;"> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

이후 tr을 기준으로 설정 테이블을 기준으로 위치를 지정하는 것은 매우 간단해 보이지만 문제는 이 방법이 ie8과 ff 모두에 유효하지 않고 문제가 많아 금방 포기했다는 점입니다.
ps: 이 효과는 tr을 드래그할 때 매우 편리합니다.
다음으로 제가 생각한 것은 테이블에 새 tr을 삽입하고 원본 tr을 복제한 다음 이 tr을 고정(예: ​​6은 절대)으로 설정하는 것이었습니다. 예를 들면 다음과 같습니다.
코드

<table cellpadding="5" cellspacing="0" border="1" width="100"> <tr style="position:fixed; left:100px;"> <td>1</td> <td>2</td> </tr> <tr style="position:absolute; left:200px;"> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

첫 번째 문제가 해결되었습니다. IE7에서는 tr을 배치할 수 없고, td도 배치한 후 테이블의 레이아웃을 유지할 수 없으므로 원본 테이블에 tr을 삽입하는 것은 의미가 없습니다.
ps: 고정 관련 응용프로그램은 모조 라이트박스 효과를 참조하세요.

제가 사용한 마지막 방법은 새 테이블을 만들고 소스 tr을 새 테이블에 복제한 다음 새 테이블을 배치하여 효과를 얻는 것이었습니다.
이 방법을 사용하는 데 있어 두 가지 핵심 사항이 있습니다. 첫째, 가능한 최고 수준의 TR을 만들어야 하며, 둘째, 이에 대한 정확한 위치 지정이 필요합니다.

절차 설명

【클론 테이블】

요소를 복제하려면 cloneNode를 사용하면 됩니다. 여기에는 복제본에 하위 노드가 포함되어 있는지 여부를 나타내는 bool 매개변수가 있습니다.
프로그램의 첫 번째 단계는 원본 테이블을 복제하는 것입니다.

이것 ._oTable = $(table);//소스 테이블
this._nTable = this._oTable.cloneNode(false);//새 테이블
이것._nTable.id = "";//ID 충돌 방지

ie의 cloneNode 매개변수는 선택사항(기본값은 false)이지만 ff에서는 필수 매개변수로 사용할 때 매개변수를 작성하는 것이 좋습니다.
또한 id 속성도 복제된다는 점에 유의하세요. 즉, 복제 후 동일한 ID를 가진 요소가 두 개 있게 되며(복제 개체가 설정된 경우) 프로그램이 쉽게 다른 문제를 복제할 수 있습니다. 테이블 id 속성을 비워 둡니다.
ps: 클래스를 사용하여 스타일을 테이블에 바인딩하세요. ID를 사용하면 새 테이블에서 스타일을 얻을 수 없습니다.

복제 후 스타일 설정:

이것 ._style.width = 이것._oTable.offsetWidth "px";
이._style.position = isIE6 ? "절대" : "수정됨";
이것._style.zIndex = 100;

일반적으로 offsetWidth는 너비 패딩 테두리의 결과이지만 테이블은 특별합니다.

<table border="5" id="t" style="padding:10px; width:100px;"> <tr> <td>1</td> <td>1</td> </tr> </table> <table width="100" id="t2" style="border:10px solid #000;"> <tr> <td>1</td> <td>1</td> </tr> </table> <script> alert(document.getElementById("t").offsetWidth); alert(document.getElementById("t2").offsetWidth); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

只要给table设置width（style或本身的width属性），不管设置padding和border是多少，offsetWidth都等于width的值。
经测量offsetWidth是没错的，那就是说是table的width设置的问题。
w3c的table部分中说width属性是the desired width of the entire table，我估计entire就是包含了padding和border，找不到什么其他说明，先这么理解吧。
定位方面，除了不支持fixed的ie6用absolute，其他都使用fixed定位。

【克隆tr】

table有一个rows集合，包括了table的所有tr（包括thead和tfoot里面的）。
程序的Clone方法会根据其参数克隆对应索引的tr：

this._index = Math.max(0, Math.min(this._oTable.rows.length - 1, isNaN(index) ? this._index : index));
this._oRow = this._oTable.rows[this._index];
var oT = this._oRow, nT = oT.cloneNode(true);

由于tr可能是包含在thead这些中，所以还要判断一下：

if(oT.parentNode != this._oTable){
    nT = oT.parentNode.cloneNode(false).appendChild(nT).parentNode;
}

然后再插入到新table中：

if(this._nTable.firstChild){
    this._nTable.replaceChild(nT, this._nTable.firstChild);
}else{
    this._nTable.appendChild(nT);
}

프로그램에서는 복제된 tr의 수정을 허용하므로 삽입되었는지 여부를 확인합니다. 그렇지 않은 경우에는 직접 추가하고, 그렇지 않으면 원래 tr을 replacementChild로 바꿉니다.

[테이블의 테두리 및 프레임 속성]

테이블의 border 속성은 테두리 너비를 지정하는 데 사용되며, 테이블별 프레임 속성은 테이블 주위의 테두리 표시 방법을 설정하거나 가져오는 데 사용됩니다.
w3c 레이블 의 프레임 부분은 프레임이 다음 값을 가질 수 있음을 나타냅니다.
void: 측면 없음
위의 값입니다. : 위쪽만
아래: 아래쪽만.
hsides: 위쪽과 아래쪽만.
lhs: 왼쪽만.
rhs: 오른쪽만
box: 네 면 모두
border: 네 면 모두
표시할 테두리를 지정합니다. 주의할 점은 void가 기본값이지만, 설정하지 않으면 실제로는 null 값이 되어 4개의 테두리가 모두 표시된다는 점에 유의해야 합니다.
또한 프레임은 스타일에 의해 설정된 테두리에 영향을 주지 않습니다.

<table width="100" border="5" frame="lhs"> <tr> <td>1</td> <td>1</td> </tr> </table> <table width="100" style="border:5px solid #000;" border="10" frame="lhs"> <tr> <td>1</td> <td>1</td> </tr> </table>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

여기 표의 테두리와 스타일의 테두리를 동시에 설정하면 표의 테두리가 무효화되는지 확인할 수도 있습니다.

더 아름답게 만들기 위해 프로그램은 프레임과 스타일을 포함하여 새 테이블 위와 아래의 테두리를 자동으로 제거합니다.
코드

코드 복사 코드는 다음과 같습니다.

if(this._oTable.border > 0){
switch(this._oTable.frame ) {
case "위" :
case "아래" :
case "hsides" :
this._nTable.frame = "void";
case "" :
case "border" :
case "box" :
this._nTable.frame = "vsides"; break
}
}
this._style.borderTopWidth = this._style. borderBottomWidth = 0;

collapse 설정 후 null 값이 더 문제가 됩니다. ie6/ie7에서 테스트됨:

코드

<style type="text/css"> .t{width:100px; border-collapse:collapse;} .t td{border:5px solid #999;} </style> <table class="t"> <tr> <td>1</td> <td>1</td> </tr> </table> <table class="t" frame="vsides"> <tr> <td>1</td> <td>1</td> </tr> </table> <table class="t" border="1"> <tr> <td>1</td> <td>1</td> </tr> </table>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

마지막 두 개는 변환이 허용되므로 프레임을 설정하기 전에 테두리를 판단하는 것이 좋습니다.


[배경색 구하기]

TD의 배경이 투명하다면 당연히 보기 좋지 않을 것입니다. 채우기에 적합한 색상을 찾는 것이 가장 좋습니다.
프로그램에서 사용하는 방법은 현재 td에서 검색을 시작하는 것입니다. 배경이 투명하면 배경색을 찾을 때까지 상위 노드에서 검색합니다.
일반적으로 투명 속성 값은 "transparent"이지만 Chrome에서는 "rgba(0, 0, 0, 0)"이므로 투명 값을 저장하기 위해 속성을 사용합니다.

코드 복사 코드는 다음과 같습니다.

this._transparent = isChrome ? 0)" : "transparent";

GetBgColor에서 이를 사용하여 배경색 프로그램을 가져옵니다.

코드 복사 코드는 다음과 같습니다.

while (bgc == this._transparent && (node ​​​​= node.parentNode) != document) {
bgc = CurrentStyle( node).BackgroundColor;
}
return bgc == this._transparent ? "#fff" : bgc;

모든 것이 투명하면 흰색(#fff)이 반환됩니다.
여기서는 이미지의 배경을 고려하지 않습니다. 결국 이미지가 배경 전체를 덮을 수는 없습니다.
[parentNode/offsetParent/parentElement]

위에서는 ParentNode를 사용했는데, offsetParent 및 parentElement와의 차이점에 대해 이야기해 보겠습니다.
우선 w3c의 parentNode 설명을 살펴보세요:
이 노드의 부모입니다. Document, DocumentFragment 및 Attr을 제외한 모든 노드는 부모를 가질 수 있습니다. , 노드가 방금 생성되었지만 아직 트리에 추가되지 않았거나 트리에서 제거된 경우 이는 null입니다.
매우 간단합니다. 노드의 상위 노드입니다. 본 DOM은 그것을 알고 있습니다.

구별하기 쉬운 offsetParent를 살펴보세요. Mozilla와 msdn에서는 모호하지만 w3c에서는 더 명확합니다.
offsetParent 속성(호출 시) 요소 A에서는 다음 알고리즘에 의해 결정된 요소를 반환해야 합니다.
1，다음 중 하나라도 true인 경우 null을 반환하고 이 알고리즘을 중지합니다.
A는 루트 요소입니다.
A는 HTML 본문입니다.
요소 A에 대한 위치 속성의 계산된 값은 고정됩니다.
2，A가 상위 체인 어딘가에 지도 HTML 요소가 있는 영역 HTML 요소인 경우 가장 가까운 상위 지도 HTML 요소를 반환하고 중지합니다. 이 알고리즘.
3, 다음 중 하나 이상이 true인 A의 가장 가까운 조상 요소를 반환하고 그러한 조상이 발견되면 이 알고리즘을 중지합니다.
위치 속성의 계산된 값이 정적이 아닙니다.
HTML 본문 요소입니다.
A의 위치 속성의 계산된 값은 정적이며 조상은 td, th 또는 table 중 하나입니다.
4，반환 null .
여기에는 네 가지 주요 사항이 있습니다.
1. 루트 요소, 본문 요소 또는 요소의 위치가 고정된 경우
2. 가장 가까운 지도 요소가 반환됩니다. ;
3, 다음 조건 중 하나 이상을 충족하는 노드에 가장 가까운 요소를 반환합니다. 1. 요소의 위치가 정적이 아닙니다. 2. 본문 요소입니다. 3. 소스 요소의 위치는 정적이며 조상 요소 중 다음 요소는 td, th 또는 table입니다.
4, null을 반환합니다.
세 번째 사항은 가장 일반적인 상황입니다. 자세한 내용은 아래 테스트를 참조하세요.

<tr> <td><div id="t1"><table width="100" id="t"> <tr> <td><div id="t1"></div></td> <td id="t2"><div style="position:absolute;"> <div id="t3"></div> </div></td> </tr> </table></div></td> <td id="t2"><div style="위치:절대;"> <div id="t3"> <script> alert(document.getElementById("t").offsetWidth); alert(document.getElementById("t2").offsetWidth); </script> <script> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; alert($("t").offsetParent)//body alert($("t1").offsetParent)//td alert($("t2").offsetParent)//table alert($("t3").offsetParent)//div alert($("t4").offsetParent)//null </script> </div> </div></td> </tr> <div id="t4" style="position:fixed;"></div> <script> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; alert($("t").offsetParent)//body alert($("t1").offsetParent)//td alert($("t2").offsetParent)//table alert($("t3").offsetParent)//div alert($("t4").offsetParent)//null </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

可见offsetParent跟parentNode的区别还是很大的。

而parentNode跟parentElement除了前者是w3c标准，后者只ie支持，其他的区别就不是那么明显了。
在ie中大部分情况下两者的效果是一样的，当然如果是一模一样的话ie就没必要弄这么一个东西出来了，测试下面的代码：

<script> var o = document.createDocumentFragment().appendChild(document.createElement("div")); alert(o.parentNode) alert(o.parentNode.nodeType)//11 alert(o.parentElement)//null alert(document.body.parentNode) alert(document.body.parentNode.nodeType)//1 alert(document.body.parentElement)//html alert(document.body.parentNode.parentNode) alert(document.body.parentNode.parentNode.nodeType)//9 alert(document.body.parentElement.parentElement)//null </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

可以看到当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null。
这就明白了名字中“Element”的含义了。

【设置td宽度】

接下来就要设置td宽度了，要获取某元素的宽度可以通过以下方法：
1，支持defaultView的可以直接用getComputedStyle获取width。
2，获取offsetWidth，再减去border和padding的宽度。
这个本来也可以，但td的border宽度的获取比较麻烦，下面有更方便的方法。
3，获取clientWidth，再减去padding的宽度。
这个跟方法2差不多，但更简单方便。

注意ie的currentStyle不像getComputedStyle能获取准确值，而只是一个设置值，像百分比、auto这些并不会自动转成准确值，即使是得到准确值也不一定是实际值，像td即使设置一个很大的准确值，实际值也不会超过table本身的宽度。
所以在td这种比较特殊的结构中，除非是很理想的状况，否则用currentStyle基本没戏，而且在这个效果中即使是差了1px也会看不舒服。
对于支持defaultView的当然可以直接获取，否则就用上面的方法3来获取：

style.width = (document.defaultView ? parseFloat(css.width)
    : (o.clientWidth - parseInt(css.paddingLeft) - parseInt(css.paddingRight))) + "px";

그런데 여기서는 어떤 방법을 써도 스크롤이 발생한다는 문제가 있는데, 다행히 td 요소를 스크롤하도록 오버플로로 설정해도 ie8과 ie8을 제외하면 스크롤바가 나타나지 않습니다. 크롬.
결국 td에 대해 스크롤을 설정하는 것이 일반적이지 않으며 이를 지원하는 브라우저도 많지 않습니다. 여기에 너무 많은 시간을 소비할 필요는 없습니다.
ps: td 너비 자동 조정에 대해서는 w3c 의 테이블 레이아웃 부분을 참조하세요.

colspan과 같이 원래 td 구조에 영향을 미치는 설정이 있는 경우 잘못된 구조로 인해 비정상적인 변형이 발생할 수 있으므로 주의하시기 바랍니다.
원래 테이블의 구조나 내용이 수정된 경우 Clone 메소드를 실행하여 새 테이블을 재구성해야 합니다.
체험에 있어 더욱 중요한 부분입니다. 제대로 설정되지 않으면 변형된 느낌이 들어 매우 보기 흉합니다.

【국경붕괴】

위에서 td의 테두리 너비를 구하는 것이 번거롭다고 언급했는데, 얼마나 번거로운가요?
일반적인 경우라면 borderLeftWidth와 borderRightWidth를 통해 너비를 구하면 됩니다.
ps: borderStyle이 "none"이면 테두리가 유효하지 않으므로 테두리 너비를 얻으려면 먼저 borderStyle이 "none"인지 확인하는 것이 가장 좋습니다.

그러나 테이블에는 테이블의 테두리 모델을 설정하는 특별한 스타일의 borderCollapse가 있습니다.
분리(별도, 기본값)와 축소(병합)라는 두 가지 값이 있습니다.
우리가 일반적으로 보는 효과는 별개입니다. 여기서는 주로 축소에 대해 논의합니다. 먼저 mozilla가 말하는 내용을 살펴보겠습니다.
접힌 테두리 모델에서는 인접한 테이블 셀이 테두리를 공유합니다. .
은 접기 테두리 모델에서 인접한 td가 테두리를 공유한다는 것을 의미합니다. 다음 예를 보면 더 명확해질 것입니다.

<style type="text/css"> .t{line-height:40px;width:200px; } .t td{border:5px solid #999;} </style> <table class="t" style="border-collapse:collapse;"> <tr> <td width="50"> </td> <td style="border-left-width:10px; border-left-style:dotted;"> </td> <td width="50"> </td> </tr> </table> <table class="t"> <tr> <td width="50"> </td> <td style="border-left-width:10px; border-left-style:dotted;"> </td> <td width="50"> </td> </tr> </table>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

당신 Collapse를 사용한 후 인접한 TD의 경계가 하나로 병합되고 인접한 경계 중 너비가 더 큰 것이 우선한다는 것을 알 수 있습니다.
td와 table 사이는 어떻습니까? 다음 예를 참고하세요.

<style type="text/css"> .t{line-height:40px;width:200px;border-collapse:collapse;} .t td{border:5px solid #999;} </style> <table class="t" id="t1"> <tr> <td width="50" style="border-left:10px dotted #999;"> </td> <td> </td> <td width="50"> </td> </tr> </table> <table class="t" id="t2" style="border-left:10px dotted #999;"> <tr> <td width="50"> </td> <td> </td> <td width="50"> </td> </tr> </table>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

표시 테이블과 td 사이에도 동일한 규칙을 따릅니다.
또 다른 점은 축소가 설정되면 셀 간격이 유효하지 않다는 것입니다. 그런데 테두리 간격은 실제로 CSS의 셀 간격 스타일 형식입니다. 자세한 내용은 mozilla 지침을 참조하세요.

collapse의 일반적인 적용은 1px 테두리가 있는 테이블과 같은 테두리 테이블을 만드는 것입니다.

<style type="text/css"> .t{line-height:40px;width:200px;} .t1{border-collapse:collapse;} .t1 td{border:1px solid #999;} .t2{background-color:#999;} .t2 td{background-color:#FFF;} </style> <table class="t t1"> <tr> <td width="50"> </td> <td> </td> <td width="50"> </td> </tr> </table> <table class="t t2" cellspacing="1"> <tr> <td width="50"> </td> <td> </td> <td width="50"> </td> </tr> </table>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

前者用的collapse，后者是用table背景色模拟，虽然效果都一样，但前者显然较好，才是真正的“边框”。

在使用了collapse之后，要写一个通用的获取边框宽度程序会变得十分麻烦，而且有些情况下甚至没办法判断获取。
详细情况这里就不细说了，有兴趣研究的话可以看看w3c的The collapsing border model，当然要想全部了解的话还要在各个浏览器中研究。

【元素位置】

table的样式设置好后，还需要获取原table和原tr的位置参数，为后面的元素定位做准备。
要获取某个元素相对文档的位置，传统的做法是获取对象的offsetLeft/offsetTop，然后不断获取offsetParent的offsetLeft/offsetTop，直到找不到offsetParent为止。
得到的结果就是相对文档的位置了，上面已经介绍过offsetParent，原理应该都明白了吧。
程序的SetRect设置区域属性方法中也使用了这个思路：

复制代码 代码如下:

//获取原table位置
var o = this._oTable, iLeft = o.offsetLeft, iTop = o.offsetTop;
while (o.offsetParent) { o = o.offsetParent; iLeft += o.offsetLeft; iTop += o.offsetTop; }
this._oTableLeft = iLeft;
this._oTableTop = iTop;
this._oTableBottom = iTop + this._oTableHeight;
//获取原tr位置
o = this._oRow; iTop = o.offsetTop;
while (o.offsetParent) { o = o.offsetParent; iTop += o.offsetTop; }
this._oRowTop = iTop;
this._oRowBottom = iTop + this._oRow.offsetHeight;

不过这里介绍一个更好的方法，通过getBoundingClientRect方法来获取。
在mozilla是这么说明的：
The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport...
返回一个TextRectangle对象，包含left, top, right和bottom几个只读属性，以px为单位来表示边界框相对视窗左上角的位置。（偶英文烂啊）
注意是相对视窗，不是文档哦，如果要相对文档还必须加上scrollLeft/scrollTop。
通过下面的测试可以看到两个方法返回的结果都是相同的：

<style type="text/css"> .t{line-height:40px;width:200px; border:10px solid; margin-top:900px; margin-left:500px;} </style> <div class="t" id="t"></div> <script> var o = document.getElementById("t"); var rect = o.getBoundingClientRect(); var iLeft1 = rect.left + document.documentElement.scrollLeft, iTop1 = rect.top + document.documentElement.scrollTop; var iLeft2 = o.offsetLeft, iTop2 = o.offsetTop; while (o.offsetParent) { o = o.offsetParent; iLeft2 += o.offsetLeft; iTop2 += o.offsetTop; } alert(iLeft1+"_"+iLeft2) alert(iTop1+"_"+iTop2) </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

程序中如果支持getBoundingClientRect就会用它来获取位置参数：

复制代码 代码如下:

//用getBoundingClientRect获取原table位置
var top = this._doc.scrollTop, rect = this._oTable.getBoundingClientRect();
this._oTableLeft = rect.left + this._doc.scrollLeft;
this._oTableTop = rect.top + top;
this._oTableBottom = rect.bottom + top;
//获取原tr位置
rect = this._oRow.getBoundingClientRect();
this._oRowTop = rect.top + top;
this._oRowBottom = rect.bottom + top;

显然用getBoundingClientRect更方便快捷。
这个方法虽然是ie的产物，但已经是w3c的标准，而且ff3和Opera都已经支持了这个方法，基本可以放心使用，除了chrome。
这里只是简单介绍，想了解更多可以看w3c的View Module部分。

获取原table和tr的位置后，还需要计算新table的位置。
程序可以自定义新table位于视窗位置的百分比，例如顶部是0，中间是0.5，底部是1，可以在程序初始化时或用SetPos方法来设置。
这里主要获取视窗高度和新table在视窗的top值：

this._viewHeight = document.documentElement.clientHeight;
this._ntViewTop = (this._viewHeight - this._nTableHeight) * this._pos;

定位范围实际上是从视框顶部到视框高度减去新table高度的范围内的，所以计算时要先把视窗高度减去新table的高度。

【元素定位】

万事俱备，只欠定位了。
由于要根据窗口滚动状态来判断计算定位，scrollTop/scrollLeft的获取必不可少。
但在chrome中就算用了DOCTYPE，也要用document.body来获取scrollTop/scrollLeft，尽管它确实有document.documentElement。
对chrome了解不多，也不知哪里能查它的相关文档，程序里就直接做个判断算了：

this._doc = isChrome ? document.body : document.documentElement;

定位的第一步就是判断是否需要定位，这里的判断标准有两个，第一个是原tr是否超过了视窗范围，还有是新table要显示的位置是否在原table的显示范围内。
第一点可以通过原tr位置的顶部和底部是否超过视窗的顶部和底部来判断：

var top = this._doc.scrollTop, left = this._doc.scrollLeft
    ,outViewTop = this._oRowTop < top, outViewBottom = this._oRowBottom > top + this._viewHeight;
if(outViewTop || outViewBottom){}

在看第二点之前先看看程序中的Auto属性，它是用来指定否自动定位的。
如果自动定位的话当原tr离开视框顶部新table就会定位到视框顶部，原tr离开底部新table就会定位到视框底部，这样看上去会比较自然顺畅。
如果不选择自动的话就会根据SetPos方法中计算得到的新table视窗top值来设置定位：

var viewTop = !this.Auto ? this._nTableViewTop
    : (outViewTop ? 0 : (this._viewHeight - this._nTableHeight))//视窗top
    ,posTop = viewTop + top;//位置top

接着就判断新table要显示的位置是否在原table的显示范围内，这个可以通过新table位置的顶部和底部是否超过原table的顶部和底部来判断：

if(posTop > this._oTableTop && posTop + this._nTableHeight < this._oTableBottom){}

当符合所有的条件就可以进行定位了，如果是fixed定位的就使用相对视窗的top值：

this._style.top = viewTop + "px";
this._style.left = this._oTableLeft - left + "px";

예를 들어 ie6이 절대 위치에 있는 경우 상대 문서의 최상위 값을 사용해야 합니다.

이것 ._style.top = posTop "px ";
이것._style.left = 이것._oTableLeft "px";

왼쪽과 오른쪽 스크롤을 고려하여 왼쪽도 설정해야 합니다.

물론 조건이 충족되지 않으면 프로그램은 간접적으로 "숨기기" 위해 top에 큰 음수 값을 설정합니다.
IE6 페이지를 늘리지 않기 때문에 음수 값을 사용합니다. 디스플레이를 사용하지 않는 이유는 위에서 오프셋 높이를 얻어야 하기 때문입니다.

마지막으로 창의 스크롤 이벤트에 실행 프로그램을 바인딩하면 창 크기가 조정될 때 뷰 프레임의 높이가 변경되므로 크기 조정 이벤트를 SetPos 프로그램에 바인딩해야 합니다.

【표지 선택】

포지셔닝을 사용하는 한, 오랜 라이벌인 "ie6의 셀렉트"와 맞서야 합니다.
이전 글에서도 몇 가지 해결 방법을 소개한 적이 있습니다(여기에서 오버레이 선택 참조). 여기에서는 선택을 직접 숨길 수 없으므로 iframe만 사용할 수 있는 것 같습니다. .
하지만 iframe에는 큰 문제가 있습니다. ie6에서 다음 코드를 테스트하고 스크롤 막대를 드래그하세요.

<style type="text/css"> body{height:1000px;} .t{height:300px;width:200px; border:1px solid; position:absolute; background:#FFF;top:0;left:0;} </style> <iframe class="t" id="t"></iframe> <select></select> <select></select> <select></select> <select></select> <select></select> <select></select> <select></select> <select></select> <select></select> <select></select>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

iframe에서도 스크롤 막대를 드래그할 때 선택 항목이 여전히 그 뒤에서 깜박이는 것을 볼 수 있습니다. 이 현상은 이 프로그램에서 특히 두드러집니다.
선택 항목을 숨기는 방법을 사용해야 할 것 같습니다. 가장 좋은 방법은 다른 선택 항목의 일반적인 표시에 영향을 주지 않고 새 테이블 뒤에 선택 항목만 숨기는 것입니다.
핵심은 선택 항목이 새 테이블 뒤에 있는지 판단하는 방법입니다. 이는 위치 좌표로 판단할 수 있으며 위의 getBoundingClientRect를 사용할 수 있습니다.
일반적인 아이디어는 새 테이블의 좌표를 결정하고 선택하고, 위치에 따라 선택 항목의 표시 및 숨기기를 결정하는 것입니다.
그러나 인스턴스가 여러 개인 경우 한 인스턴스에서는 선택 항목이 숨겨지고 다른 인스턴스에서는 표시될 수 있습니다.

충돌을 해결하기 위해 프로그램은 선택 항목을 숨긴 인스턴스 수를 기록하는 카운터로 선택 항목에 _count 속성을 추가합니다.
현재 인스턴스가 선택 항목을 숨겨야 한다고 판단하면 _count에 1을 추가하고 숨긴 후 인스턴스의 _selects 컬렉션에 저장합니다.
_selects에서 선택 항목의 표시를 복원할 때 먼저 선택 항목의 _count를 1씩 감소시킵니다. 획득한 _count가 0이면 이를 숨길 다른 인스턴스가 없다는 의미이므로 표시를 설정할 수 있으며, 마지막으로 _selects 컬렉션을 지웁니다.
선택 항목을 숨길지 여부를 판단하기 전에 인스턴스의 _selects에서 선택 항목을 복원해야 합니다. 그렇지 않으면 _count가 증가하기만 하고 감소하지는 않습니다.

프로그램의 SetSelect 메소드는 선택을 결정하고 설정하는 데 사용됩니다.

코드 복사 코드 다음과 같습니다:

this.ResetSelect();
var ect = this._nTable.getBoundingClientRect();
//숨겨야 할 항목을 _selects 컬렉션에 넣습니다.
this._selects = Filter(this ._oTable.getElementsByTagName("select"), Bind(this, function(o){
var r = o.getBoundingClientRect();
if(r.top <= ret.bottom && r .bottom > ;= ret.top){
o._count ? o._count : (o._count = 1);//여러 인스턴스 충돌 방지
//숨기기로 설정
var visi = o .style.visibility;
if(visi != "hidden"){ o._css = visi; o.style.visibility = "hidden" }

return
} >}) )

ResetSelect 메소드는 디스플레이 선택을 복원하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다:

forEach(this._selects, function(o){ !--o._count && (o.style.visibility = o._css); }) ;
this._selects = [];

그러나 이 방법은 여전히 ​​빠르게 스크롤할 때 효과가 없으며 더 나은 방법이 있으면 공유해 주세요.

[Chrome 버그]

테스트 중 Chrome에서 버그를 발견하여 다음 코드를 테스트했습니다.

<div id="t"></div> <script> document.getElementById("t").offsetWidth; document.getElementById("tt").innerHTML = "<select><option>test"; </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

一个毫不相干的操作居然令table没有自动撑开，加上前面的问题，看来Chrome的路还很长啊。

使用说明

实例化一个TableFixed对象只需要一个参数table的id：

new TableFixed("idTable");

实例化时有4个可选属性：
Index: 0,//tr索引
Auto: true,//是否自动定位
Pos: 0,//自定义定位位置百分比(0到1)
Hide: false//是否隐藏（不显示）

其中Index和Pos在实例化之后就不能使用。
要修改克隆行可以用Clone方法，其参数是要克隆tr的索引。
要修改自定义定位位置可以用SetPos方法，其参数是要定位的位置百分比。

具体使用请参考实例。

프로그램 소스코드

var TableFixed = 함수(테이블, 옵션){ this._oTable = $(table);//원본 테이블 this._nTable = this._oTable.cloneNode(false);//새 테이블 this._nTable.id = "";//ID 충돌 방지 this._oTableLeft = this._oTableTop = this._oTableBottom = 0;//원래 테이블 좌표 매개변수 기록 this._oRowTop = this._oRowBottom = 0;//원래 tr 좌표 매개변수 기록 this._viewHeight = this._oTableHeight = this._nTableHeight = 0;//레코드 높이 this._nTableViewTop = 0;//새 테이블 뷰 상단을 기록합니다. this._selects = [];//ie6에서 선택을 재정의하는 데 사용되는 선택 컬렉션 this._style = this._nTable.style; // 코드를 단순화하는데 사용됩니다. //Chrome의 스크롤은 document.body를 사용합니다. this._doc = isChrome ? document.body : document.documentElement; //크롬 투명은 rgba(0, 0, 0, 0)을 사용합니다. this._transparent = isChrome ? "rgba(0, 0, 0, 0)": "투명"; this.SetOptions(옵션); this._index = this.options.Index; this._pos = this.options.Pos; this.Auto = !!this.options.Auto; this.Hide = !!this.options.Hide; addEventHandler(window, "resize", Bind(this, this.SetPos)); addEventHandler(window, "scroll", Bind(this, this.Run)); this._oTable.parentNode.insertBefore(this._nTable, this._oTable); this.Clone(); }; TableFixed.prototype = { //기본 속성 설정 SetOptions: 함수(옵션) { this.options = {//기본값 인덱스: 0,//tr 인덱스 Auto: true,//자동으로 찾을지 여부 Pos: 0,//맞춤 위치 지정 위치 비율(0~1) Hide: false//숨길지 여부(표시하지 않음) }; 확장(this.options, 옵션 || {}); }, //테이블 복제 클론: ​​function(index) { //테이블 스타일 설정 this._style.width = this._oTable.offsetWidth "px"; this._style.position = isIE6 ? "절대" : "고정"; this._style.zIndex = 100; //인덱스 설정 this._index = Math.max(0, Math.min(this._oTable.rows.length - 1, isNaN(index) ? this._index : index)); //새 행 복제 this._oRow = this._oTable.rows[this._index]; var oT = this._oRow, nT = oT.cloneNode(true); if(oT.parentNode != this._oTable){ nT = oT.parentNode.cloneNode(false).appendChild(nT).parentNode; } //새 행 삽입 if(this._nTable.firstChild){ this._nTable.replaceChild(nT, this._nTable.firstChild); }또 다른{ this._nTable.appendChild(nT); } //테이블 위와 아래의 테두리 제거 if(this._oTable.border > 0){ 스위치(this._oTable.frame) { "위"의 경우: "아래"의 경우: 케이스 "hsides": this._nTable.frame = "void"; 사례 "" : 케이스 "테두리": 케이스 "상자": this._nTable.frame = "vsides"; } } this._style.borderTopWidth = this._style.borderBottomWidth = 0; //td 스타일 설정 var nTds = this._nTable.rows[0].cells; forEach(this._oRow.cells, Bind(this, 함수(o, i)){ var css = CurrentStyle(o), 스타일 = nTds[i].style; //td 배경 설정 style.BackgroundColor = this.GetBgColor(o, css.BackgroundColor); //ie8/chrome의 스크롤 설정을 고려하지 않고 td의 너비를 설정합니다. style.width = (document.defaultView ?parseFloat(css.width) : (o.clientWidth -parseInt(css.paddingLeft) -parseInt(css.paddingRight))) "px"; })); //테이블 높이 얻기 this._oTableHeight = this._oTable.offsetHeight; this._nTableHeight = this._nTable.offsetHeight; this.SetRect(); this.SetPos(); }, //배경색을 구한다 GetBgColor: 함수(노드, bgc) { //투명한 배경 없음(이미지 배경은 고려되지 않음) while (bgc == this._transparent && (노드 ​​= node.parentNode) != 문서) { bgc = 현재스타일(노드).배경색상; } return bgc == this._transparent "#fff" : bgc; }, //좌표 속성 설정 SetRect: 함수() { if(this._oTable.getBoundingClientRect){ //getBoundingClientRect를 사용하여 원래 테이블 위치를 가져옵니다. var top = this._doc.scrollTop, ret = this._oTable.getBoundingClientRect(); this._oTableLeft = ret.left this._doc.scrollLeft; this._oTableTop = ret.top 상단; this._oTableBottom = ret.bottom 상단; //원래 tr 위치를 구합니다. ret = this._oRow.getBoundingClientRect(); this._oRowTop = ret.top 상단; this._oRowBottom = ret.bottom 상단; }else{//Chrome은 getBoundingClientRect를 지원하지 않습니다. //원래 테이블 위치를 구함 var o = this._oTable, iLeft = o.offsetLeft, iTop = o.offsetTop; while(o.offsetParent) { o = o.offsetParent; iLeft = o.offsetLeft; this._oTableLeft = iLeft; this._oTableTop = iTop; this._oTableBottom = iTop this._oTableHeight; //원래 tr 위치를 구합니다. o = this._oRow; iTop = o.offsetTop; while(o.offsetParent) { o = o.offsetParent; iTop = o.offsetTop } this._oRowTop = iTop; this._oRowBottom = iTop this._oRow.offsetHeight; } }, //새 테이블 위치 속성 설정 SetPos: 함수(pos) { //위치 설정 this._pos = Math.max(0, Math.min(1, isNaN(pos) ? this._pos : pos)); //위치 가져오기 this._viewHeight = document.documentElement.clientHeight; this._nTableViewTop = (this._viewHeight - this._nTableHeight) * this._pos; this.Run(); }, //달리다 실행: function() { if(!this.Hide){ var 상단 = this._doc.scrollTop, 왼쪽 = this._doc.scrollLeft //원래 tr이 상단과 하단을 초과하는지 여부 ,outViewTop = this._oRowTop top this._viewHeight; //원래 tr이 창 범위를 초과했습니다. if(outViewTop || outViewBottom){ var viewTop = !this.Auto this._nTableViewTop ? : (outViewTop ? 0 : (this._viewHeight - this._nTableHeight))//창 상단 ,posTop = viewTop 상단;//위치 상단 //원래 테이블의 범위 내에서 if(posTop > this._oTableTop && posTop this._nTableHeight = ret.top){ o._count ? o._count : (o._count = 1);//여러 인스턴스 충돌 방지 //숨기도록 설정 var visi = o.style.visibility; if(visi != "숨김"){ o._css = visi o.style.visibility = "숨김" } 사실을 반환; } })) }, //선택 스타일 복원 ResetSelect: 함수() { forEach(this._selects, function(o){ !--o._count && (o.style.visibility = o._css); }); this._selects = []; } };
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

완전한 테스트 코드 다운로드
재인쇄 시 출처를 표기해주세요: http://www.cnblogs.com/cloudgamer/