런타임노트

[jQuery] 버튼을 눌렀을 때 같은 줄에 있는 데이터 가져오기 본문

Javascript, jQuery

[jQuery] 버튼을 눌렀을 때 같은 줄에 있는 데이터 가져오기

D269 2023. 9. 14. 15:18
728x90

 

출처 : https://semicolon-dev.tistory.com/48

 

 

 

 

원하는 개발 방향
1. 테이블에 모든 줄에 저장 버튼이 있음
2. 저장 버튼을 눌렀을 때 해당 줄에 있는 값을 jQuery 상에서 불러와야 함

우선 해당 개발 방향대로 개발을 진행하기 위해 아래와같은 테이블을 작성하였습니다.

 

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <title>JS Bin</title>
</head>
<body>
<table border=1>
   <tr>
    <td><b>주소</b></td>
    <td><b>설명</b></td>
    <td><b>저장버튼</b></td>
  </tr>
  <tr>
    <td>
      <input id="" value="semicolon-dev.tistory.com"/>
    </td>
    <td>
      <input value="세미콜론 티스토리"/>
    </td>
    <td>
      <button type="button" class="saveBtn" class="clickBtn">저장</button>
    </td>
  </tr>
    <tr>
    <td>
      <input value="naver.com"/>
    </td>
    <td>
      <input value="네이버"/>
    </td>
    <td>
      <button type="button" class="saveBtn" class="clickBtn">저장</button>
    </td>
  </tr>
    <tr>
    <td>
      <input value="daum.net"/>
    </td>
    <td>
      <input value="다음"/>
    </td>
    <td>
      <button type="button" class="saveBtn" class="clickBtn">저장</button>
    </td>
  </tr>
</table>
</body>
</html>

 

 

$('.saveBtn').on('click', function() { 
  
  //현재 row의 정보 가져오기 
  var thisRow = $(this).closest('tr'); 
  
  //주소 input 값 가져오기
  var addr = thisRow.find('td:eq(0)').find('input').val();
  //섦졍 input 값 가져오기
  var txt = thisRow.find('td:eq(1)').find('input').val();
  
  alert(addr + ", " + txt + "을(를) 클릭하였습니다.");
  
})

 

 

 

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)

'Javascript, jQuery' 카테고리의 다른 글

[JS] 셀렉트박스(select box) 변경 이벤트 처리  (0) 2023.10.27
[JS] var와 let  (0) 2023.10.18
[jQuery] undefined 와 null 차이점 및 값 체크하기  (0) 2023.09.13
[JS] forEach(), ARROW function  (2) 2023.03.31
[JS] 문자열 줄 바꿈하기  (2) 2023.03.24
'Javascript, jQuery' Related Articles more