잡동사니에도 사랑을

[JQuery] 댓글 입력, 저장, 삭제하는 방법 본문

JAVA_EE/JQuery

[JQuery] 댓글 입력, 저장, 삭제하는 방법

luvforjunk 2021. 10. 18. 15:33
728x90
반응형

[21.10.18] exam02(07_jQueryEvent) - 댓글 입력, 저장, 삭제

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	color: #333;
}

ul {
	list-style: none;
}

#container {
	padding: 30px 20px;
}

h1 {
	font-size: large;
	border-left: 10px solid #7BAEB5;
	border-bottom: 1px solid #7BAEB5;
	padding: 10px;
	width: auto;
}

#comment_write {
	padding: 20px 15px;
	border-bottom: 1px solid #7BAEB5;
}

#comment_write label {
	display: inline-block;
	width: 80px;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
}

#comment_write input[type='text'], #comment_write textarea {
	border: 1px solid #ccc;
	vertical-align: middle;
	padding: 3px 10px;
	font-size: 12px;
	line-height: 150%;
}

#comment_write textarea {
	width: 380px;
	height: 90px
}

.comment_item {
	font-size: 13px;
	color: #333;
	padding: 15px;
	border-bottom: 1px dotted #ccc;
	line-height: 150%;
}

.comment_item .writer {
	color: #555;
	line-height: 200%;
}

.comment_item .writer input {
	vertical-align: middle;
}

.comment_item .writer .name {
	color: #222;
	font-weight: bold;
	font-size: 14px;
}
</style>
</head>
<body>
	<div id="container">
		<h1>jQuery Comment</h1>
		<div id="comment_write">
			<form id="comment_form">
				<div>
                	<label for="user_name">작성자</label> 
                    	<input type="text" name="user_name" id="user_name" /> 
                        <input type="submit" value="저장하기" />
				</div>
				<div>
					<label for="comment">덧글 내용</label>
					<textarea name="comment" id="comment"></textarea>
				</div>
			</form>
		</div>

		<!-- 동적 요소 -->
	<ul id="comment_list"></ul>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
	// submit 했을 때
	$('#comment_form').submit(
			function() {
				if (!$('#user_name').val()) {
					alert('이름을 입력하세요.');
					$('#user_name').focus();
					return false;
				}

				if (!$('#comment').val()) {
					alert('내용을 입력하세요.');
					$('#comment').focus();
					return false;
				}

				var date = new Date();
				var yy = date.getFullYear();
				var mm = date.getMonth() + 1;
				var dd = date.getDate();
				var hh = date.getHours();
				var mi = date.getMinutes();
				var ss = date.getSeconds();

				if (mm < 10) {mm = "0" + mm;};
				if (dd < 10) {dd = "0" + dd;};
				if (hh < 10) {hh = "0" + hh;};
				if (mi < 10) {mi = "0" + mi;};
				if (ss < 10) {ss = "0" + ss;};

				var today = yy + "-" + mm + "-" + dd + " " + hh + ":"
						+ mi + ":" + ss;

				var new_li = $('<li>');
				new_li.addClass('comment_item');
				// li라는 클래스를 만들고 거기에 속성을 부여해라

				var writer_p = $('<p>');
				writer_p.addClass('writer');

				var name_span = $('<span>');
				name_span.addClass('name');
				name_span.html($('#user_name').val() + '님');

				var date_span = $('<span>');
				date_span.html(' / ' + today + ' ');

				var del_input = $('<input>');
				del_input.attr({
					'type' : 'button',
					'value' : '삭제하기'
				});
				del_input.addClass('delete_btn');

				var content_p = $('<p>');
				content_p.html($('#comment').val());

				writer_p.append(name_span).append(date_span).append(
						del_input);
				new_li.append(writer_p).append(content_p);
				$('#comment_list').append(new_li);

				$('#user_name').val('');
				$('#comment').val('');

			return false;
		});

	// $('.delete_btn').click(function(){	
	$(document).on('click', '.delete_btn', function() {
		if (confirm('선택하신 항목을 삭제하시겠습니까?')) {
			$(this).parents('.comment_item').remove();
		}
	});
});
</script>
</body>
</html>

 

 

on() 함수 - 동적 - 앞으로 동적으로 추가할 요소에 대한 이벤트를 미리 정의해 놓는 기능이다.
- 사용법 ; 새로 추가될 요소에 대한 이벤트이기 때문에 이 이벤트가 정의되는 시점에서는 대상이 존재하지 않는다. 따라서 이 이벤트는 document 객체에 설정해야 한다.

//$(부모) $(document).on( "이벤트", "셀렉터", function() { ... 이벤트 처리 ... }); -->

 

 

[결과]

 

 

 

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[JQuery] 아이디, 비밀번호 유효성 검사 & 일정 시간 후 서버로 정보 보내기  (0) 2021.10.18
[JQuery] jQueryDOM - 카테고리(목록) 추가 및 삭제  (0) 2021.10.18
[JQuery] 선택된 항목만 내용 표시  (0) 2021.10.18
[JQuery] 마우스 올려 서브 메뉴 펼치기 & 모든 서브 메뉴 숨기기  (0) 2021.10.18
[21.10.18] exam02(06_jQueryDOM) - 이미지 목록 클릭 시 클릭한 이미지 띄우기  (0) 2021.10.18
'JAVA_EE/JQuery' Related Articles more