67. 댓글 수정창 만들기

jsp를 수정해 댓글 수정창을 만든다

<!--  댓글 목록 -->

	<form action="/board/addReply.kh" method="post">
		<input type="hidden" name="refBoardNo" value="${board.boardNo }">
		<table align="center" width="500" border="1">
			<tr>
				<td><textarea rows="3" cols="55" placeholder="내용을 작성하세요"
						name="replyContents" required="required"></textarea></td>
				<td>
					<button>등록하기</button>
				</td>
			</tr>

		</table>
	</form>

	<table align="center" width="500" border="1">

		<c:forEach items="${rList }" var="reply" varStatus="i">
			<tr>
				<td width="100">${reply.replyWirter }</td>
				<td>${reply.replyContents }</td>
				<td>${reply.rCreateDate }</td>
				<td><button type="button" onclick="modifyView(this.id)"
						id="modify${i.count }">수정</button> <a href="#">삭제</a>
			</tr>

<!--여기부터 댓글 수정창-->
			<tr class="modifyViews">
				<form action="/board/" method="post">
					<td colspan="3"><input type="hidden" name="replyNo"
						value="${reply.replyNo }"> <input type="hidden"
						name="refBoardNo" value="${board.boardNo }"> <textarea
							rows="3" cols="55" placeholder="내용을 작성하세요" name="replyContents"
							required="required">
							${reply.replyContents }
					</textarea></td>
					<td>
						<button>수정</button>
						<button onclick="modifyCancle('modify${i.count }')" type="button">취소</button>
					</td>
				</form>
			</tr>
<!--댓글 수정창 종료-->
		</c:forEach>
	</table>


	</form>


	<script>
		var modifyViews = document.getElementsByClassName('modifyViews')

		for (var i = 0; i < modifyViews.length; i++) {
			modifyViews[i].style.display = 'none'
		}

		function modifyCancle(idI) {
			var modifiId = document.getElementById(idI);
			modifiId.parentElement.parentElement.style.display = '';
			modifiId.parentElement.parentElement.nextElementSibling.style.display = 'none';

		}
		function modifyView(idI) {
			var modifiId = document.getElementById(idI);
			modifiId.parentElement.parentElement.style.display = 'none';
			modifiId.parentElement.parentElement.nextElementSibling.style.display = '';

		}

		function remove() {
			event.preventDefault(); // 하이퍼링크 이동방지
			if (window.confirm("게시물을 삭제하시겠습니까?")) {
				location.href = '/board/remove.kh?page=${pageNow}';

			}

		}
	</script>

• 자바스크립트를 활용해 수정버튼을 누르면 수정창이 보이도록 했다.
• 댓글창 밑에는 댓글 수정창이 있지만 기본적으로 display none을 사용해 보이지 않게 만들었다.

  	var modifyViews = document.getElementsByClassName('modifyViews')
  
  		for (var i = 0; i < modifyViews.length; i++) {
  			modifyViews[i].style.display = 'none'
  		}

• forEach문의 i.count를 활용해 모든 수정 버튼의 아이디값은 modify1,modify2… 순서로 정해진다.

  	<c:forEach items="${rList }" var="reply" varStatus="i">
  			<tr>
  				<td width="100">${reply.replyWirter }</td>
  				<td>${reply.replyContents }</td>
  				<td>${reply.rCreateDate }</td>
  				<td><button type="button" onclick="modifyView(this.id)"
  						id="modify${i.count }">수정</button> <a href="#">삭제</a>
  			</tr>

• 해당 id값을 활용해 수정버튼을 눌렀을때 수정버튼 밑에 숨겨져있던 수정창은 display none에서 display ‘’로 변하며 원래 댓글창은 display none으로 변경된다.

  			function modifyView(idI) {
  			var modifiId = document.getElementById(idI);
  			modifiId.parentElement.parentElement.style.display = 'none';
  			modifiId.parentElement.parentElement.nextElementSibling.style.display = '';
  
  		}

  • 좀더 나은코드가 있을수 있었겠지만 일단 나는 this.id를 활용해 id값을 인식하여 id로 해당 버튼을 정의하고, 해당버튼의 부모태그의 부모태그를 display none으로 하고
  • 부모태그의 바로다음 형제태그를 display none에서 ‘’으로 바꾸어 dipsplay 속성을 없애주었다.
• 이제 댓글 수정창에서 취소를 누르면 댓글 수정창이 사라지고 원래 댓글 창이 보이도록 하였다.

  <tr>
  				<form action="/board/" method="post">
  					<td colspan="3"><input type="hidden" name="replyNo"
  						value="${reply.replyNo }"> <input type="hidden"
  						name="refBoardNo" value="${board.boardNo }"> <textarea
  							rows="3" cols="55" placeholder="내용을 작성하세요" name="replyContents"
  							required="required">
  							${reply.replyContents }
  					</textarea></td>
  					<td>
  						<button>수정</button>
  						<button onclick="modifyCancle('modify${i.count }')" type="button">취소</button>
  					</td>
  				</form>
  			</tr>

  	function modifyCancle(idI) {
  			var modifiId = document.getElementById(idI);
  			modifiId.parentElement.parentElement.style.display = '';
  			modifiId.parentElement.parentElement.nextElementSibling.style.display = 'none';
  
  		}