메뉴 건너뛰기

조회 수 2786 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
# 만약 해당 row가 몇 번째 해당하는지 알려면?리스트에서 홍길동이란 이름을 가진 사람을 찾아야합니다. 해당하는 엘리먼트가 몇 번째인지 알려면 어떻게할까요? 엘리먼트가 부모로부터 몇번째 요소인지 확잊해야겠지만 table 태그를 사용하는 경우라면 rowIndex를 사용할 수 있습니다.


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

아래의 스크립트는 해당 인덱스값을 찾아 alert()을 사용하여 출력합니다.
@ tr_index.js
var getIndex = function() {
  var select = document.querySelector('.select');
  var index = select.rowIndex;
  alert(index);
};

이제 버튼을 누르면 해당값이 화면에 출력될 것입니다.결과는 4번째이므로 0, 1, 2, 3 순서에 따라서 3이 출력될 것입니다. 아래에서 직접 눌러보세요.

List of Articles
번호 제목 날짜 조회 수
87 셀렉트(select) change 이벤트 (split) 2016.12.23 6009
86 셀렉트(select) change Ajax 이벤트 2016.12.23 12549
85 셀렉트(select) change href 이벤트 2016.12.23 5899
84 팝업창 가운데 띄우기 2016.12.23 6702
83 [INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다 2017.02.19 8514
82 날짜 및 시간 입력 구현하기, Bootstrap DateTimePicker file 2017.04.06 16507
81 새로고침(F5) 금지 2018.03.28 5995
80 Javascript selectbox selected 컨트롤 file 2018.06.21 10046
79 스마트 에디터 (네이버 에디터) 에디터 내에서 이미지 크기 줄이기.(리사이징) file 2018.07.04 2711
78 체크박스(CheckBox) 전체 선택, 전체 해제 checked file 2018.07.04 2904
77 SelectBox에서 선택된 항목의 텍스트, 값 가져오기 선택 옵션 넣기. 2018.07.04 4010
76 반복문 사용할때 태그 식별하기 data-item 2018.07.04 1849
75 스마트에디터(SmartEditor)에서 textarea 유효성 체크하기 2018.07.04 3956
74 다음 우편번호(주소) api 예시 file 2018.07.04 4897
73 cross site scripting을 막기위한...javascript 2018.07.24 1596
72 유용한 스크립트 모음 2018.07.24 2291
71 key pressing 누르거나 클릭중인 이벤트 예제 2018.08.29 1616
» 테이블에서 해당 열의 인덱스 값 얻는 방법 2018.08.29 2786
69 팝업창 차단 "허용 메시지" 2018.09.28 1738
68 엔터키 / enter key submit form 2018.09.28 1528
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved