Table td Access

- first td, second td, third td, ....., n td -

 

 

   table의 여러 td 중에서 특정 td에만 접근해서 무언가를 하고 싶을 때가 있죠. 첫번째는 td:first-child로 접근 가능합니다. 두번째 부터는 td:nth-child(2) 이렇게 접근 가능한데 first-child도 nth-child(1)로 접근 가능하니까 td:first-child 보다는 nth-child로 통일해서 사용하는 것이 좋을 것 같네요. 아래 몇 가지 예시를 작성해봅니다. 

 

 

1. table의 첫번째 td에만 click 이벤트를 주는 방법  

$('#target_table').on('click', 'td:first-child', function(){
  console.log('frist td click !!!!');
});


...
...
<table id='target_table'> ... </table>

  table의 첫 번째 td를 클릭하면 console.log가 찍힙니다. 위 function안에서 this 를 출력해보면 td에 대한 내용이 나옵니다. 그런데 만약 tr에 대한 내용이 필요하다면? 아래와 같이 parent() 를 이용하면 됩니다. 그러니까 이벤트는 td 첫 번째꺼에만 달아두고 실제 사용하는 데이터는 tr에 대한 전체 데이터인 경우 !! 아래와 같이 사용할 수 있다. 

$('#target_table').on('click', 'td:first-child', function(){
  console.log('frist td click !!!!');
  var parent_tr = $(this).parent();
  // parent_tr를 이용해서 processing !!! 
});

 

 

2. table의 두번째 td에 click 이벤트를 주는 방법

$('#target_table').on('click', 'td:nth-child(2)', function(){
  ...
});

 

 

3. table의 세번째 td에 click 이벤트를 주는 방법

$('#target_table').on('click', 'td:nth-child(3)', function(){
  ...
});

 

  nth-child는 0부터 시작이 아니고요. 1부터 시작입니다. 옛날 브라우저에서는 작동이 안될지도 모른다고 하니까 익스7, 8 같은 곳에서도 잘 작동해야 하는 웹사이트면 확인해보시고 다른 방법을 사용하셔야 할 것 같아요.

 

 

+ Recent posts