속성 제어 메서드 실습_jQuery
2022. 1. 21. 14:15ㆍksmart_html_css_js/jQuery 실습
728x90
1.
회원 선택 버튼 클릭 시 회원의 정보를 #choiceUserName, #choiceUserAddr, #choiceUserAge에 출력하도록 하여라.
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.util.List"%>
<%@ page import="kr.or.ksmart.dto.UserDto"%>
<%
/*
데이터 베이스에 저장된 회원 목록을 가지고 왔다는 가정
<참조타입> -> 제네릭
제네릭을 사용하여 객체화 시켰을 경우
- 컴파일 시 제네릭에 표기된 타입으로 확정이 되며,
표기된 타입만 삽입과 표기된 타입만 가지고 올 수 있다.
- 타입의 안정성, 캐스팅 문구 필요없다.
*/
//userList에 userDto 만 넣을 수 있다.
ArrayList<UserDto> userList = new ArrayList<UserDto>();
UserDto user = null;
user = new UserDto();
user.setUserAddr("전주");
user.setUserName("홍길동");
user.setUserAge(20);
userList.add(user);
user = new UserDto();
user.setUserAddr("익산");
user.setUserName("홍길순");
user.setUserAge(25);
userList.add(user);
user = new UserDto();
user.setUserAddr("군산");
user.setUserName("이순신");
user.setUserAge(28);
userList.add(user);
%>
<html>
<head>
<meta charset="UTF-8">
<title>속성 제어 메서드 실습</title>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>회원명 : <span id="choiceUserName">-</span></td>
<td>회원주소 : <span id="choiceUserAddr">-</span></td>
<td>회원나이 : <span id="choiceUserAge">-</span></td>
</tr>
</tbody>
</table>
<h3>회원목록</h3>
<table border="1">
<tbody>
<%
for (UserDto userDto : userList) {
%>
<tr>
<td><%=userDto.getUserName()%></td>
<td><%=userDto.getUserAddr()%></td>
<td><%=userDto.getUserAge()%></td>
<td><button type="button" class="userPrint"
data-userName="<%=userDto.getUserName()%>"
data-userAddr="<%=userDto.getUserAddr()%>"
data-userAge="<%=userDto.getUserAge()%>">회원선택</button></td>
</tr>
<%
}
%>
</tbody>
</table>
</body>
</html>UserDto.java
package kr.or.ksmart.dto;
public class UserDto {
private String userName;
private String userAddr;
private int userAge;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getUserAddr() {
return userAddr;
}
public void setUserAddr(String userAddr) {
this.userAddr = userAddr;
}
public int getUserAge() {
return userAge;
}
public void setUserAge(int userAge) {
this.userAge = userAge;
}
}
1. 답
<script type="text/javascript">
$(function() {
$('.userPrint').click(function() {
var $getUserName = $(this).attr('data-userName');
var $getUserAddr = $(this).attr('data-userAddr');
var $getUserAge = $(this).attr('data-userAge');
$(this).parents().find($('#choiceUserName')).html('<span>'+$getUserName+'</span>');
$(this).parents().find($('#choiceUserAddr')).html('<span>'+$getUserAddr+'</span>');
$(this).parents().find($('#choiceUserAge')).html('<span>'+$getUserAge+'</span>');
});
});
</script>728x90
'ksmart_html_css_js > jQuery 실습' 카테고리의 다른 글
| 클래스 속성 제어 메서드, 동적 바인딩_jQuery (0) | 2022.01.27 |
|---|---|
| 속성 조작 메서드(prop)실습_jQuery (0) | 2022.01.21 |
| 객체 조작 메서드 실습_jQuery (0) | 2022.01.21 |
| 배열 관련 매서드 실습_jQuery (0) | 2022.01.21 |
| 배열관련메서드 실습_jQuery (0) | 2022.01.20 |