최근에 프로젝트를 진행 중인데 갑자기 사용자가 테이블 헤더를 플로팅하도록 요청했습니다. (내용이 같은 페이지에 표시되고 스크롤할 때 열 헤더를 볼 수 없기 때문입니다.) 함수는 jquery 순수 HTML을 사용하여 구현되었으므로 변경을 줄이기 위해 jquery 원래 생태학만 사용하여 스크롤을 구현할 수 있습니다.
html 헤더 코드:
< ;tr class="header" >
| | 교수진 | 과학 연구< ;/td>
| | >
| 인재 양성 | 직위 구조 | 학위 구조
| 학생-교사 비율 | 과학 연구 프로젝트 | 과학연구공로상 | 과학연구논문 | | jquery 코드:
코드 복사
if(yy>55){
yy = yy-55;
}
var height1 = yy ; //첫 번째 줄의 상위 값
var height2 = $(headers[0]).height() yy;// 아니요. 행의 상위 값, 첫 번째 행의 행 높이와 스크롤 막대
var height3 = $(headers[0]).height() $( headers[1]).height() yy;
$(headers[0]).css({"position":"absolute",top:height1 "px"});//플로팅 행
$ (headers[1]).css( {"position":"absolute",top:height2 "px"})
$(headers[2]).css({"position":"absolute",top :height3 "px"});
[javascript] 일반 사본 보기
$("#hiddenTd").height($(headers[0]).height() $(headers[ 1]).height() $( headers[2]).height());//헤더가 부동함에 따라 해당 테이블이 내용은 자동으로 위로 이동합니다. 표 내용은 덮어쓰이지 않으며, 높이는 표 머리글의 높이로 설정됩니다.
참고: 여러 줄 헤더를 사용할 때 셀에 rowspan 속성을 사용하지 마세요. 그렇지 않으면 헤더가 잘못 정렬됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
