JavaScript를 이용한 row 값 모달로 전달하기

• getElementById(): 찾으려는 요소 ID를 매개변수로 받아 해당 요소를 찾아 반환, 존재하지 않으면 null.

• getElementsByTagName(): 요소의 태그 이름을 매개변수로 받고, 그 요소가 담긴 List 반환.

> 표 row

• 해당 tr 부분 클릭시 PopupEmpInfo() 함수로 이동.

<tbody id="emp_rows">   <c:forEach var="li" items="${articleList}">    <!--tr 클릭시 모달 켜짐-->      <tr onclick="PopupEmpInfo(this)">         <td style="display:none">${li.emnum}</td><!-- 사번 -->         <td>${li.dname}</td><!-- 부서 -->         <td>${li.tname}</td><!-- 팀 -->         <td>${li.name}</td><!-- 이름 -->         <td>${li.position}</td><!-- 직위 -->      </tr>   </c:forEach> </tbody>

> PopupEmpInfo()

• 사원 정보를 순서대로 모달에 적용

• 변수 row_td에  td태그 리스트를 받음

• 변수 modal에 modal_emp_info 요소 정보를 받음

• innerHTML은 “emp_info_emnum” 요소의 내용을 바꿀수있음.

• innerHTML을 이용하여 “emp_info_emnum”의 내용을 row_td[0].innerHTML로 바꿔줌.

• row_td는 td list니까 list의 [0]요소의 값을 넣어줌.

• Modal을 보이게 함. (modal.style.display = ‘block’)

function PopupEmpInfo(clicked_element) {   var row_td = clicked_element.getElementsByTagName("td");   var modal = document.getElementById("modal_emp_info");      document.getElementById("emp_info_emnum").innerHTML = row_td[0].innerHTML;   document.getElementById("emp_info_dnum").innerHTML = row_td[1].innerHTML;   document.getElementById("emp_info_tnum").innerHTML = row_td[2].innerHTML;   document.getElementById("emp_info_name").innerHTML = row_td[3].innerHTML;   document.getElementById("emp_info_position").innerHTML = row_td[4].innerHTML;   // 사원 정보 보기 모달을 보이게 합니다.   modal.style.display = 'block'; }

> Modal

• 위 함수에서 적용한 값이 모달에 나타남.

<div class="w3-row-padding">         <div class="w3-quarter">            <label style="font-weight: bold">사원 번호</label>            <p class="w3-input w3-border" style="height: 50px" id="emp_info_emnum" readonly >         </div>         <div class="w3-half">            <label>이름</label>            <p class="w3-input w3-border" style="height: 50px" id="emp_info_name" readonly>         </div>         <div class="w3-quarter">            <label>직위</label>            <p class="w3-input w3-border" style="height: 50px" id="emp_info_position"  readonly>         </div>      </div>