- 테이블 한 열(tr)을 클릭하면 기능이 실행되게끔 on이벤트(click) 처리해둔 상태
- 이 열의 삭제 기능을 추가해야되는 상황 발생
- td 한칸에 버튼을 추가했고 그 버튼의 기능이 실행되기 전 기존 tr에 걸려있는 on('click') 이벤트가 실행되는 것 확인
테이블 상황 |
th1 번호 |
th2 썸네일 |
th3 제 목 |
th4 등록날짜 |
th5 |
<tr> <td1> 1 |
<td2> 사진 |
<td3> 테스트 |
<td4> 2019-7-5 |
<td5> 삭제 버튼 </tr> |
소스 코드 |
1 2 3 4 5 | $("#테이블아이디 tr").on('click',function(e){ //tr을 클릭했을때 실행할 기능 console.log("test"); }); | cs |
- 전체 코드는 promise를 써서 <tr> 이하 내용을 javascript로 입력하고 then에 이 소스 코드가 등장함
- td 5개중에 <td5>만 tr의 이벤트에서 제외시켜야 하는 상황
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $("#테이블아이디 tr").each(function(){ var lastTd = $(this).find(":last-child"); //여기서는 <td5> $("#"+lastTd[2].id).on('click',function(e){ e.stopImmediatePropagation(); //chrome에서 //이 td에서만 실행할 기능 console.log('hello'); }); }); $("#테이블아이디 tr").on('click',function(e){ //tr을 클릭했을때 실행할 기능 console.log("test"); }); | cs |
- <tr>에 on('click') 이벤트를 걸기전에 <tr>들의 마지막 <td>를 구해놓고(2번 line)
- 마지막<td>의 상위객체인 <tr>의 이벤트를 막는다.(3~7번 line)
'PROGRAMMING > Javascript,PHP' 카테고리의 다른 글
[REDIS] phpredis 로 key, value를 set/get 하기 (0) | 2019.04.08 |
---|---|
[Javascript]FileReader 같은 데이터 연속으로 올리기 (1) | 2019.03.13 |
[Javascript]for문 안에 setInterval(+clearInterval) 쓰기 (0) | 2019.02.12 |