게시판 상세보기 스타일 지정

list.html 파일을 '다른 이름으로 저장하기' 메뉴를 이용하여 view.html 파일을 생성한다.
view.html 문서를 열고 #content의 div id="content-categories" 아래 다음 코드를 붙여넣는다.
목록을 보여주는 기존 코드는 그대로 둔다.

<div class="view-menu" style="margin-top: 15px;margin-bottom: 5px;">
    <div class="fl">
        <input type="button" value="수정" />
        <input type="button" value="삭제" />
    </div>
    <div class="fr">
        <input type="button" value="다음 글" />
        <input type="button" value="이전 글" />
        <input type="button" value="목록" />
        <input type="button" value="새 글쓰기" />
    </div>
</div>
<table class="bbs-table">
<tr>
    <th style="width: 47px;text-align: left;vertical-align: top;font-size: 1em;">TITLE</th>
    <th style="text-align: left;color: #555;font-size: 1em;">무궁화꽃이피었습니다</th>
</tr>
</table>
<div id="detail">
    <div id="date-writer-hit">2014 10-09 17:50:30 by 홍길동 hit 1330</div>
    <div id="article-content">
    무궁화꽃이피었습니다무궁화꽃이피었습니다무궁화꽃이피었습니다<br />
    무궁화꽃이피었습니다무궁화꽃이피었습니다무궁화꽃이피었습니다<br />
    </div>
	<div id="file-list" style="text-align: right;">
		<div class="attach-file">
			<a href="#" title="filename" class="download">TEST.png</a>
			<a href="#" title="filekey">삭제</a>
		</div>
	</div>
</div>
<!--  댓글 쓰기 -->
<form id="addCommentForm" style="margin: 10px 0;" action="addComment.jsp" method="post">
    <div id="addComment">
        <textarea id="addComment-ta" name="memo" rows="7" cols="50"></textarea>
    </div>
    <div style="text-align: right;">
        <input type="submit" value="댓글 남기기" />
    </div>
</form>
<!--  댓글 반복 시작 -->
<div class="comments">
    <span class="writer">xman</span>
    <span class="date">2011.12.11 12:14:32</span>
    <span class="modify-del">
        <a href="javascript:modifyCommentToggle('5')">수정</a>
         | <a href="javascript:deleteComment('5')">삭제</a>
    </span>
    <p id="comment5">무궁화꽃이피었습니다</p>
    <form id="modifyCommentForm5" class="comment-form" action="updateComment.jsp" method="post" style="display: none;">
    <input type="hidden" name="commentNo" value="5" />
    <input type="hidden" name="boardCd" value="chat" />
    <input type="hidden" name="articleNo" value="12" />
    <input type="hidden" name="curPage" value="1" />
    <input type="hidden" name="searchWord" value="무궁화꽃" />
    <div class="fr">
            <a href="javascript:document.forms.modifyCommentForm5.submit()">수정하기</a>
            | <a href="javascript:modifyCommentToggle('5')">취소</a>
    </div>
    <div>
        <textarea class="comment-textarea" name="memo" rows="7" cols="50">무궁화꽃이 피었습니다.</textarea>
    </div>
    </form>
</div>
<!--  댓글 반복 끝 -->
<div id="next-prev">
    <p>다음 글 : <a href="#">무궁화꽃이 피었습니다.</a></p>
    <p>이전 글 : <a href="#">무궁화꽃이 피었습니다.</a></p>
</div>
<div class="view-menu" style="margin-bottom: 47px;">
    <div class="fl">
        <input type="button" value="수정" />
        <input type="button" value="삭제" />
    </div>
    <div class="fr">
        <input type="button" value="다음 글" />
        <input type="button" value="이전 글" />
        <input type="button" value="목록" />
        <input type="button" value="새 글쓰기" />
    </div>
</div>

댓글이 반복되는 부분에서 comment5와 modifyCommentForm5에서 5는 댓글의 고유번호이다. 이 번호는 프로그램적으로 부여되어야 한다.

bbs-view-01

댓글 수정을 위한 자바 스크립트 토글 함수

아래 그림의 수정을 클릭하면 동작하는 자바스크립트 함수를 생성하려 한다.

댓글 수정 링크

수정을 클릭하면 textarea를 포함하는 수정 폼이 나타나야 한다. (이 수정 폼은 디폴트로 숨겨져 있다) 아래 자바스크립트 코드를 </head> 바로 위에 복사한다.

<script type="text/javascript">
function modifyCommentToggle(articleNo) {
    var p_id = "comment" + articleNo;
    var p = document.getElementById(p_id);
    
    var form_id = "modifyCommentForm" + articleNo;
    var form = document.getElementById(form_id);
    
    var p_display;
    var form_display;
    
    if (p.style.display) {
            p_display = '';
            form_display = 'none';
    } else {
            p_display = 'none';
            form_display = '';
    }
    p.style.display = p_display;
    form.style.display = form_display;
}
</script>

댓글의 수정과 취소를 클릭하여 자바스크립트 함수가 제대로 동작하는지 확인한다.

위에서 강조된 수정과 취소 링크는 같은 동작을 한다. 수정 폼이 보이면 안 보이게, 안 보이면 보이게 한다. 댓글 본문을 담는 p 엘리먼트는 정확히 이와 반대로 동작한다. 이를 토글(toggle)이라 한다.