# 만약 해당 row가 몇 번째 해당하는지 알려면?리스트에서 홍길동이란 이름을 가진 사람을 찾아야합니다. 해당하는 엘리먼트가 몇 번째인지 알려면 어떻게할까요? 엘리먼트가 부모로부터 몇번째 요소인지 확잊해야겠지만 table 태그를 사용하는 경우라면 rowIndex를 사용할 수 있습니다.
! rowIndex 사용하여 해당 row index값 얻기table 요소의 tr 태그... 즉 row에 해당하는 엘리먼트에 적용할 수 있으며 rowIndex는 해당하는 Index값을 반환하게됩니다. 이때 위에서부터 0부터 1, 2, 3 ... 순서로 반환합니다. 그럼 아래에서 더 자세히 예제로 알아봅니다.
회원 리스트를 예로 들어봅니다. 만약 아래와 같이 회원들의 이름이 존재하는 table 태그가 있습니다. 여기서 만약 select 클래스명을 가진 tr 태그가 몇 번째인지 확인하려면 어떻게 할까요?
@ tr_index.html
아래의 스크립트는 해당 인덱스값을 찾아 alert()을 사용하여 출력합니다.
@ tr_index.js
이제 버튼을 누르면 해당값이 화면에 출력될 것입니다.결과는 4번째이므로 0, 1, 2, 3 순서에 따라서 3이 출력될 것입니다. 아래에서 직접 눌러보세요.
! rowIndex 사용하여 해당 row index값 얻기table 요소의 tr 태그... 즉 row에 해당하는 엘리먼트에 적용할 수 있으며 rowIndex는 해당하는 Index값을 반환하게됩니다. 이때 위에서부터 0부터 1, 2, 3 ... 순서로 반환합니다. 그럼 아래에서 더 자세히 예제로 알아봅니다.
회원 리스트를 예로 들어봅니다. 만약 아래와 같이 회원들의 이름이 존재하는 table 태그가 있습니다. 여기서 만약 select 클래스명을 가진 tr 태그가 몇 번째인지 확인하려면 어떻게 할까요?
@ tr_index.html
<table border="1">
<tr><td>이길동</td></tr>
<tr><td>김길동</td></tr>
<tr><td>최길동</td></tr>
<tr class="select"><td>홍길동</td></tr>
<tr><td>고길동</td></tr>
</table>
<button onclick="getIndex();">결과보기</button>
<tr><td>이길동</td></tr>
<tr><td>김길동</td></tr>
<tr><td>최길동</td></tr>
<tr class="select"><td>홍길동</td></tr>
<tr><td>고길동</td></tr>
</table>
<button onclick="getIndex();">결과보기</button>
아래의 스크립트는 해당 인덱스값을 찾아 alert()을 사용하여 출력합니다.
@ tr_index.js
var getIndex = function() {
var select = document.querySelector('.select');
var index = select.rowIndex;
alert(index);
};
var select = document.querySelector('.select');
var index = select.rowIndex;
alert(index);
};
이제 버튼을 누르면 해당값이 화면에 출력될 것입니다.결과는 4번째이므로 0, 1, 2, 3 순서에 따라서 3이 출력될 것입니다. 아래에서 직접 눌러보세요.