제이쿼리 특정행 클릭 시 정보 가져오기 (동적으로 생성된 요소의 이벤트 처리)

 

  <div class="col-md-6">
    <label for="empMjNum" class="form-label">매니저명</label>
    <input type="text" class="form-control" id="empMjNum" name="empMjNum">
    <input type="text" class="form-control" id="empMjNm" 
    placeholder="직원명을 입력해주세요"/>
        <button type="button" id="btnEmpMjNum" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">검색</button>
  </div>

 

 

모달창 

<div class="modal" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
       <!-- 직원 목록 시작 -->
       <div class="bd-example">
  <table class="table table-striped table-hover">
      <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">직원번호</th>
      <th scope="col">이름</th>
    </tr>
  </thead>
  <tbody id="trAdd">
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
  </tbody>

  </table>
</div>
       <!-- 직원 목록 끝 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 

 

스크립트(제이쿼리)

	//매니저선택하기
	//모든직원가져오기
	$('#btnEmpMjNum').on('click',function(){
		$.ajax({
			url : "/emp/getEmpAll",
			type : "post",
			success:function(result){
				//result : List<EmpVO>
				let code ="";
				$.each(result,function(index,empVO){
					console.log('empVO.empNum:'+empVO.empNum);
					console.log('empVO.empNm:'+empVO.empNm);
					
				    code += "<tr class='trSelecct'><th scope='row'>"+(index+1)+"</th>";
				    code += "<td>"+empVO.empNum +"</td>";
				    code += "<td>"+empVO.empNm+"</td></tr>";
				});
				
				console.log("code : "+code);
				//.html() : 새로고침 / append() : 누적
//				$('#trAdd').html(""); //초기화
				$('#trAdd').html(code);
			}
			
		});
	});
    
    	//동적으로 생성된 요소의 이벤트 처리
	$(document).on('click','.trSelecct',function(){
		//tr이 여러개인데 그 중 클린한 바로 그 tr
		
 		let resultStr = $(this).children().map(function(){
 	          return $(this).text();}).get().join(",");
 		
 	      console.log("resultStr : " + resultStr); 
 	      
 	      //resultStr : 5, EMP005, 이정재 = > SPLIT(",")를 해서 배열로 만들고
 	      //[1]은 매니저명, [2]는 매니저명으로 입력
 	      
 	      let arr = resultStr.split(",");
 	      console.log("나눠줫니?"+arr[0]);
 	      console.log("나눠줫니?"+arr[1]);
 	      
 	      $('#empMjNum').val(arr[1]);
 	      $('#empMjNm').val(arr[2]);
	});