[JSP,JS] 테이블 클릭시 테이블 데이터값 가져오는법

1. JSP

<table class="datatable hover mt20 no-footer dataTable" id="checkList">
	          		<thead>
				       	<tr>
							<th>진행 단계</th>
							<th>요청번호</th>
							<th>업무 유형</th>
							<th>제목</th>
							<th>요청자</th>
							<th>처리자</th>
				       	</tr>
				   	</thead>
				   	<tbody id="popUp">
				   		<tr>
				   		   <td>업무 대기</td>
				   		   <td>22-0705</td>
				   		   <td>IT</td>
				   		   <td>재택근무 PC 요청 조회</td>
				   		   <td>김김김(123)</td>
				   		   <td>홍길동(운영팀)</td>
				   		</tr>
				   		<tr>
				   		   <td>업무 진행</td>
				   		   <td>93-0125</td>
				   		   <td>IT</td>
				   		   <td>재택근무 PC 요청 조회</td>
				   		   <td>최최최()</td>
				   		   <td>황씨()</td>
				   		</tr>
				   	</tbody>
				</table>
                
                
<span>제목</span>
              	<div>
              		<input type="text" class="form-control W100 w50p" id="title" name="title" maxlength="50"/>
              	</div>
              </li>
              <li>
              	<!-- 업무 유형 -->
              	<span>업무 유형</span>
              	<div>
              		<input type="text" class="form-control W100 w50p" id="workType" name="workType" style="margin-bottom : 3px"/>
              	</div>
              </li>
              <li>
              	<!-- 요청자 -->
              	<span>요청자</span>
              	<div>
              		<input type="text" class="form-control W100 w50p" id="requested" name="" style="margin-bottom : 3px"/>
              	</div>
              </li>
              <li>
             	<!-- 처리자 -->
              	<span>처리자</span>
              	<div>
              	  <input type="text" class="form-control W100 w50p" id="processors" name="" />
                </div>
              </li>
              <li>
              	<!-- 진행단계 -->
              	<span>진행단계</span>
              	<div>
              		<%-- <input type="text" name="" width="50%;" id="EMP_NAME" name="EMP_NAME" value="${loginUser.userNm}"> --%>
              		<input type="text" class="form-control W100 w50p" id="stage" name=""/>
              	</div>

 

 

2. JS

 

$('#checkList tbody').on('click', 'tr', function () {
	
		var str = ""
        var tdArr = [];    // 배열 선언
        
        // 현재 클릭된 Row(<tr>)
        var tr = $(this);
        var td = tr.children();
        
        // tr.text()는 클릭된 Row 즉 tr에 있는 모든 값을 가져온다.
        // 반복문을 이용해서 배열에 값을 담아 사용할 수 도 있다.
        td.each(function(i){
            tdArr.push(td.eq(i).text());
            
        });
        
        $('#title').val(tdArr[3]);
        $("#workType").val(tdArr[2]);
        $('#requested').val(tdArr[4]);
        $('#processors').val(tdArr[5]);
        $('#stage').val(tdArr[0]);
        
});

1) checkList = 테이블의 id

2) tbody에 있는 값들을 배열에 넣어준다.

3) input태그에 value값에 배열에 들어간 값을 넣어준다.