자바스크립트 테이블 값 가져오기(테이블 이벤트 추가하기)

자바스크립트로 table td 클릭 시 값 가져오는 함수입니다.

jquery 없이 순수 자바스크립트로 구현되었습니다.

document.querySelectorAll('#tb td')
.forEach(e => e.addEventListener("click", function() {
    console.log(this.innerHTML)
}));

끝! 너무 간단하죠? 단 4줄의 코드로 이벤트를 추가시키고 값을 가져옵니다.

#tb 부분에 테이블 id 넣어주시면 되고, this.innerHTML이 td 값이니 필요하신 대로 쓰시면 됩니다.

 

tr 값을 가져오려면 아래의 방법으로 하면 됩니다.

document.querySelectorAll('#tb tr')
.forEach(e => e.addEventListener("click", function() {
  td = this.children;
  console.log(td[0].innerHTML,td[1].innerHTML)
}));

tr의 children, 즉 td값들을 가져온 후 td[0].innerHTML 로 값을 가져오면 됩니다.

여기서 td[0]은 td 번호입니다. 맨 왼쪽부터 0이니 원하는 값 위치를 확인 후 번호를 맞게 바꿔주면 됩니다.

 

See the Pen table td click event by jess (@jess44) on CodePen.

예제 화면입니다.