서술형 1번 시험풀이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>UI구현</title>
<script>
$(function(){
$(".item .copy").click(function(){
$(this)
.parent()
.clone(true)
.appendTo($("#result"));
});
$(".item .remove").click(function(){
$(this)
.parent()
.remove();
});
});
</script>
<style>
.item {
background:orangered;
width: 200px;
height: 200px;
margin: 5px;
}
</style>
</head>
<body>
<div class="item">
<input type="button" value="복사하기" class="copy">
<input type="button" value="삭제하기" class="remove">
</div>
<div id="result"></div>
</body>
</html>문제해결시나리오 1번 모범답안 코드 정정 : id가 아닌 class로 처리해야함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webContent</title>
<script src="/js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("tr").click(function(){
var $t = $(this).children();
$("#number").text($t.eq(0).text());
$("#title").text($t.eq(1).text());
$("#writer").text($t.eq(2).text());
})
})
</script>
</head>
<body>
<table border="1">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
</tr>
<tr>
<td>1</td>
<td>첫 번째 게시물 입니다</td>
<td>홍길동</td>
</tr>
<tr>
<td>2</td>
<td>두 번째 게시물 입니다</td>
<td>홍길동</td>
</tr>
<tr>
<td>3</td>
<td>세 번째 게시물 입니다</td>
<td>홍길동</td>
</tr>
</table>
<div id="result">
<label>선택한 게시물 :</label>
<span id="number"></span>
<label>/</label>
<span id="title"></span>
<label>/</label>
<span id="writer"></span>
</div>
</body>
</html>문제해결시나리오 2번 모범답안 코드
과거 지상직 / 개발자 지망생