Node.js는 스크롤 막대가 특정 위치로 스크롤되고 특정 tr_javascript 기술을 자동으로 찾는다는 것을 인식합니다.
- 不言원래의
- 2018-05-28 14:15:404938검색
스크롤 막대가 있는 테이블을 구현하고 특정 tr을 찾는 것은 실제로 매우 간단합니다. js 코드 몇 줄이면 완료됩니다.
js 코드
<strong><script type="text/javascript">
function test(){
var $objTr = $("#location"); //找到要定位的地方 tr
$objTr.css("background-color","lightgray"); //设置要定位地方的css
var objTr = $objTr[0]; //转化为dom对象
$("#dataDiv").animate({scrollTop:objTr.offsetTop},"slow"); //定位tr
}
</script></strong>html
<body>
<h1>定位</h1>
<p id="dataDiv" style="overflow-x:hidden;overflow-y:auto;height:400px;width:450px;">
<table id="tableId" style="width:400px;background-color:yellow" align="center" border="0">
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr <span style="color:#FF0000;">id="location"</span>><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
</table>
</p>
<input type="button" value="定位到一行" onclick="test()"/>
</body>
단 몇 줄의 코드지만 철저하게 이해해야 합니다. animate, scrollTop의 사용과 .offsetTop의 의미를 잘 알고 있어야 편안하게 사용할 수 있습니다.
1. animate 사용 지침:
animate() 메서드는 CSS 속성 집합의 사용자 정의 애니메이션을 수행합니다.
이 방법은 CSS 스타일을 통해 요소를 한 상태에서 다른 상태로 변경합니다. CSS 속성 값은 점진적으로 변경되어 애니메이션 효과를 만들 수 있습니다. 숫자 값만 애니메이션화할 수 있습니다(예: "여백:30px"). 문자열 값은 애니메이션화할 수 없습니다(예: "배경색상:빨간색").
2.scrollTop
scrollTop 속성
어떤 경우에는 "요소의 콘텐츠" 높이가 "요소 자체"의 높이를 초과합니다. "요소의 콘텐츠"에 해당 요소의 상한을 초과하는 요소 콘텐츠 부분의 높이입니다.
설명: 내부 요소의 높이 값은 300px > 외부 요소의 높이 값은 200px이므로 "외부 요소의 내용"(즉, "내부 요소")을 완전히 표시할 수 없으며 외부 요소는 오버플로가 자동으로 설정되어 외부 요소가 레이어 요소의 오른쪽에 수직 슬라이더가 나타납니다. 초기 상태에서는 "내부 요소의 상단 경계"와 "외부 요소의 상단 경계"가 일치하며, 이때 "외부 요소의 상단 경계"를 초과하는 내용은 없습니다. scrollTop 속성은 0입니다.
스크롤 블록을 아래쪽으로 드래그하면 "외부 요소의 위쪽 경계"를 초과하는 내용이 점차 증가하며, scrollTop 값은 이러한 초과 부분의 높이와 같습니다. 스크롤 블록을 아래쪽으로 드래그하면 "내부 요소의 아래쪽 테두리"와 "외부 요소의 아래쪽 테두리"가 일치합니다. 이때 콘텐츠의 높이가 "외부 요소의 위쪽 테두리"를 초과합니다. = 300px-200px= 100px, 이때의 scrollTop 값입니다.
3..offsetTop, offsetLeft 등
obj가 HTML 컨트롤이라고 가정합니다.
obj.offsetTop은 위에서 또는 상위 컨트롤, 정수, 단위 픽셀에서 obj의 위치를 나타냅니다.
obj.offsetLeft는 왼쪽 또는 위쪽 컨트롤, 정수, 단위 픽셀에서 obj의 위치를 나타냅니다.
obj.offsetWidth는 obj 컨트롤 자체의 너비, 정수, 단위 픽셀을 나타냅니다.
obj.offsetHeight는 obj 컨트롤 자체의 높이, 정수, 단위 픽셀을 나타냅니다.
offsetParent
offsetParent 속성은 offsetParent(포함 계층 구조에서 가장 가까운 요소)를 호출하는 요소에 가장 가까운 개체에 대한 참조를 반환하며 CSS 요소를 사용하여 위치가 지정된 컨테이너입니다. 이 컨테이너 요소가 CSS 위치에 있지 않으면 offsetParent 속성의 값은 루트 요소(표준 호환 모드의 html 요소, 이상한 렌더링 모드의 body 요소)에 대한 참조입니다. 컨테이너 요소의 style.display가 "none"(IE 및 Opera 제외)으로 설정된 경우 offsetParent 속성은 null을 반환합니다.
구문: parentObj = element.offsetParent
변수: parentObj는 현재 요소의 오프셋이 계산되는 요소에 대한 참조입니다.