-
제이쿼리 - 응용(댓글, 답글, 리스트 옮기기)프로그래밍/jQuery 제이쿼리 2021. 11. 1.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; cursor: pointer; } a:active, a:hover { text-decoration: underline; color: #F28011; } .btn { color: #333; border: 1px solid #333; background-color: #fff; padding: 4px 10px; border-radius: 4px; font-weight: 500; cursor:pointer; font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; /* 부모 요소의 기준선에 맞춤 */ } .btn:hover, .btn:active, .btn:focus { background-color: #e6e6e6; border-color: #adadad; color:#333; } .btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } .boxTF { border: 1px solid #999; padding: 5px 5px; background-color: #fff; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .selectField { border: 1px solid #999; padding: 4px 5px; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .boxTA { border:1px solid #999; height:150px; padding:3px 5px; border-radius:4px; background-color:#fff; resize : none; vertical-align: baseline; } textarea:focus, input:focus { outline: none; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function() { $("body").on("click",".btnSendReply",function(){ var num = "10"; var $tb = $(this).closest("table"); var content = $tb.find("textarea").val().trim(); if(! content){ $tb.find("textarea").focus(); return false; } content = encodeURIComponent(content); var query = "num="+num+"&content="+content; alert(query); }); }); // 답글버튼 $(function() { $("body").on("click",".btnReplyAnswerLayout",function(){ var $tr = $(this).closest("tr").next(); var replyNum = $(this).attr("data-replyNum"); var isVisible = $tr.is(":visible"); if(isVisible){ $tr.hide(); } else { $tr.show(); } }); }); // 답글 등록버튼 $(function() { $("body").on("click",".btnSendReplyAnswer",function(){ var num = "10"; var replyNum = $(this).attr("data-replyNum"); var $td = $(this).closest("td"); var content = $td.find("textarea").val().trim(); if(! content){ $td.find("textarea").focus(); return false; } content = encodeURIComponent(content); var query = "num="+num+"&content="+content+"&answer="+replyNum; alert(query); }); }); </script> </head> <body> <div style="width: 700px; margin: 30px auto;"> <table style='width: 100%; margin: 15px auto 0; border-spacing: 0;'> <tr height='30'> <td align='left' > <span style='font-weight: bold;' >댓글쓰기</span><span> - 타인을 비방하거나 개인정보를 유출하는 글의 게시를 삼가 주세요.</span> </td> </tr> <tr> <td style='padding:5px 0 0 5px;'> <textarea class='boxTA' style='width:100%; height: 70px;'></textarea> </td> </tr> <tr> <td align='right'> <button type='button' class='btn btnSendReply' style='padding:10px 20px;'>댓글 등록</button> </td> </tr> </table> <div id="listReply"> <table style='width: 100%; margin: 10px auto 30px; border-spacing: 0;'> <thead id="listReplyHeader"> <tr height="35"> <td colspan='2'> <div style="clear: both;"> <div style="float: left;"><span style="color: #3EA9CD; font-weight: bold;">댓글 50개</span> <span>[댓글 목록, 1/10 페이지]</span></div> <div style="float: right; text-align: right;"></div> </div> </td> </tr> </thead> <tbody id="listReplyBody"> <tr height='35' style='background: #eeeeee;'> <td width='50%' style='padding:5px 5px; border:1px solid #cccccc; border-right:none;'> <span><b>홍길동</b></span> </td> <td width='50%' style='padding:5px 5px; border:1px solid #cccccc; border-left:none;' align='right'> <span>2017-11-10</span> | <span class="deleteReply" style="cursor: pointer;" data-replyNum='310' data-pageNo='1'>삭제</span> </td> </tr> <tr> <td colspan='2' valign='top' style='padding:5px 5px;'> 댓글 내용 입니다. </td> </tr> <tr> <td style='padding:7px 5px;'> <button type='button' class='btn btnReplyAnswerLayout' data-replyNum='310'>답글 <span id="answerCount310">0</span></button> </td> <td style='padding:7px 5px;' align='right'> <button type='button' class='btn btnSendReplyLike' data-replyNum='310' data-replyLike='1'>좋아요 <span>5</span></button> <button type='button' class='btn btnSendReplyLike' data-replyNum='310' data-replyLike='0'>싫어요 <span>2</span></button> </td> </tr> <tr class='replyAnswer' style='display: none;'> <td colspan='2'> <div id='listReplyAnswer310' class='answerList' style='border-top: 1px solid #cccccc;'></div> <div style='clear: both; padding: 10px 10px;'> <div style='float: left; width: 5%;'>└</div> <div style='float: left; width:95%'> <textarea cols='72' rows='12' class='boxTA' style='width:98%; height: 70px;'></textarea> </div> </div> <div style='padding: 0px 13px 10px 10px; text-align: right;'> <button type='button' class='btn btnSendReplyAnswer' data-replyNum='310'>답글 등록</button> </div> </td> </tr> <tr height='35' style='background: #eeeeee;'> <td width='50%' style='padding:5px 5px; border:1px solid #cccccc; border-right:none;'> <span><b>가가가</b></span> </td> <td width='50%' style='padding:5px 5px; border:1px solid #cccccc; border-left:none;' align='right'> <span>2017-10-10</span> | <span class="deleteReply" style="cursor: pointer;" data-replyNum='309' data-pageNo='1'>삭제</span> </td> </tr> <tr> <td colspan='2' valign='top' style='padding:5px 5px;'> 안녕 하세요. </td> </tr> <tr> <td style='padding:7px 5px;'> <button type='button' class='btn btnReplyAnswerLayout' data-replyNum='309'>답글 <span id="answerCount309">1</span></button> </td> <td style='padding:7px 5px;' align='right'> <button type='button' class='btn btnSendReplyLike' data-replyNum='309' data-replyLike='1'>좋아요 <span>7</span></button> <button type='button' class='btn btnSendReplyLike' data-replyNum='309' data-replyLike='0'>싫어요 <span>1</span></button> </td> </tr> <tr class='replyAnswer' style='display: none;'> <td colspan='2'> <div id='listReplyAnswer309' class='answerList' style='border-top: 1px solid #cccccc;'> <div class='answer' style='padding: 0px 10px;'> <div style='clear:both; padding: 10px 0px;'> <div style='float: left; width: 5%;'>└</div> <div style='float: left; width:95%;'> <div style='float: left;'><b>후후후</b></div> <div style='float: right;'> <span>2017-11-22</span> | <span class='deleteReplyAnswer' style='cursor: pointer;' data-replyNum='315' data-answer='309'>삭제</span> </div> </div> </div> <div style='clear:both; padding: 5px 5px 5px 5%; border-bottom: 1px solid #ccc;'> 답글 입니다. </div> </div> </div> <div style='clear: both; padding: 10px 10px;'> <div style='float: left; width: 5%;'>└</div> <div style='float: left; width:95%'> <textarea cols='72' rows='12' class='boxTA' style='width:98%; height: 70px;'></textarea> </div> </div> <div style='padding: 0px 13px 10px 10px; text-align: right;'> <button type='button' class='btn btnSendReplyAnswer' data-replyNum='309'>답글 등록</button> </div> </td> </tr> <tr height='35' style='background: #eeeeee;'> <td width='50%' style='padding:5px 5px; border:1px solid #cccccc; border-right:none;'> <span><b>나나나</b></span> </td> <td width='50%' style='padding:5px 5px; border:1px solid #cccccc; border-left:none;' align='right'> <span>2017-10-08</span> | <span class="deleteReply" style="cursor: pointer;" data-replyNum='308' data-pageNo='1'>삭제</span> </td> </tr> <tr> <td colspan='2' valign='top' style='padding:5px 5px;'> 자바를 공부하자. </td> </tr> <tr> <td style='padding:7px 5px;'> <button type='button' class='btn btnReplyAnswerLayout' data-replyNum='308'>답글 <span id="answerCount308">0</span></button> </td> <td style='padding:7px 5px;' align='right'> <button type='button' class='btn btnSendReplyLike' data-replyNum='308' data-replyLike='1'>좋아요 <span>3</span></button> <button type='button' class='btn btnSendReplyLike' data-replyNum='308' data-replyLike='0'>싫어요 <span>0</span></button> </td> </tr> <tr class='replyAnswer' style='display: none;'> <td colspan='2'> <div id='listReplyAnswer308' class='answerList' style='border-top: 1px solid #cccccc;'></div> <div style='clear: both; padding: 10px 10px;'> <div style='float: left; width: 5%;'>└</div> <div style='float: left; width:95%'> <textarea cols='72' rows='12' class='boxTA' style='width:98%; height: 70px;'></textarea> </div> </div> <div style='padding: 0px 13px 10px 10px; text-align: right;'> <button type='button' class='btn btnSendReplyAnswer' data-replyNum='308'>답글 등록</button> </div> </td> </tr> </tbody> <tfoot id="listReplyFooter"> <tr height='40' align="center"> <td colspan='2' > 1 2 3 </td> </tr> </tfoot> </table> </div> </div> </body> </html>- 답글 버튼을 숨기거나 보이게 하는 기능
- 답글 등록 기능
- 댓글 등록 기능
답글 버튼
- 바디 영역에서 클래스 btnReplyAnswerLayout가 클릭 되면 함수가 실행 된다.
- 실행되는 함수는 클릭된 놈의 가장 가까운 tr을 찾고 그 다음(next)을 변수로 지정
- 이 클래스의 속성을 변수 하나에 넣는다.
- 답글 버튼이 보이는 상태인지 안보이는 상태인지 확인하기 위해서 보이는 상태인 :visible을 if로 확인
- if 문으로 보여지고 있으면 숨기고 숨겨져 있으면 보이게 한다.
답글 등록 버튼과 댓글 등록 기능은
입력 받은 내용의 값을 trim()로 모든 공백을 제거하고
이걸 인코딩 해준다. => encodeURIComponent(content);
그리고 이걸 쿼리로 써먹기 위해 변수 하나에 쿼리 형식으로 저장을 한다.
var query = "num="+num+"&content="+content+"&answer="+replyNum;
<html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; cursor: pointer; } a:active, a:hover { text-decoration: underline; color: #F28011; } .btn { color: #333; border: 1px solid #333; background-color: #fff; padding: 4px 10px; border-radius: 4px; font-weight: 500; cursor:pointer; font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; /* 부모 요소의 기준선에 맞춤 */ } .btn:hover, .btn:active, .btn:focus { background-color: #e6e6e6; border-color: #adadad; color:#333; } .btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } .boxTF { border: 1px solid #999; padding: 5px 5px; background-color: #fff; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .selectField { border: 1px solid #999; padding: 4px 5px; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .boxTA { border:1px solid #999; height:150px; padding:3px 5px; border-radius:4px; background-color:#fff; resize : none; vertical-align: baseline; } textarea:focus, input:focus { outline: none; } .title { width:100%; font-size: 16px; font-weight: bold; padding: 13px 0; } .container { width: 400px; margin: 30px auto; } .note-table { width: 100%; border-spacing: 0; border-collapse: collapse; } .note-table th, .note-table td { padding: 5px 0; } .left { text-align: left; padding-left: 7px; } .center { text-align: center; } .right { text-align: right; padding-right: 7px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function() { $("#itemLeft").append("<option value='lee'>이이이</option>"); $("#itemLeft").append("<option value='kim'>김김김</option>"); $("#itemLeft").append("<option value='no'>노노노</option>"); $("#itemLeft").append("<option value='hong'>홍홍홍</option>"); $("#itemLeft").append("<option value='ma'>마마마</option>"); $("#itemLeft").append("<option value='ha'>하하하</option>"); }); $(function() { $("#btnRight").click(function() { $("#itemLeft option:selected").each(function() { $(this).appendTo("#itemRight"); }); }); $("#btnAllRight").click(function() { $("#itemLeft option").each(function() { $(this).appendTo("#itemRight"); }); }); $("#btnLeft").click(function() { $("#itemRight option:selected").each(function() { $(this).appendTo("#itemLeft"); }); }); $("#btnAllLeft").click(function() { $("#itemRight option").each(function() { $(this).appendTo("#itemLeft"); }); }); }); function sendOk() { if($("#itemRight option").length===0){ alert("받는 사람을 먼저 추가하세요"); return; } $("#itemRight option").prop("selected",true); alert("ok"); } </script> </head> <body> <div class="container"> <div class="title"> <h3><span>|</span> 쪽지 보내기</h3> </div> <form name="noteForm" method="post"> <table class="note-table"> <tr> <td width="150"><span>친구목록</span></td> <td width="100"> </td> <td width="150"><span>받는사람</span></td> </tr> <tr> <td class="left"> <select name="itemLeft" id="itemLeft" multiple="multiple" class="selectField" style="width:130px; height:120px;"></select> </td> <td class="center"> <button type="button" class="btn" id="btnRight" style="display:block; width:80px;"> > </button> <button type="button" class="btn" id="btnAllRight" style="display:block;width:80px;"> >> </button> <button type="button" class="btn" id="btnLeft" style="display:block;width:80px;"> < </button> <button type="button" class="btn" id="btnAllLeft" style="display:block;width:80px;"> << </button> </td> <td class="left"> <select name="itemRight" id="itemRight" multiple="multiple" class="selectField" style="width:130px; height:120px;"> </select> </td> </tr> <tr> <td colspan="3"> <span>메시지</span> </td> </tr> <tr> <td colspan="3" class="left"> <textarea name="msg" class="boxTA" style="height:60px; width: 98%;"></textarea> </td> </tr> </table> <table class="table"> <tr> <td class="right"> <button type="button" class="btn" onclick="sendOk();"> 쪽지보내기 </button> </td> </tr> </table> </form> </div> </body> </html>제이쿼리 함수 부분
$(function() { $("#itemLeft").append("<option value='lee'>이이이</option>"); $("#itemLeft").append("<option value='kim'>김김김</option>"); $("#itemLeft").append("<option value='no'>노노노</option>"); $("#itemLeft").append("<option value='hong'>홍홍홍</option>"); $("#itemLeft").append("<option value='ma'>마마마</option>"); $("#itemLeft").append("<option value='ha'>하하하</option>"); }); $(function() { $("#btnRight").click(function() { $("#itemLeft option:selected").each(function() { $(this).appendTo("#itemRight"); }); }); $("#btnAllRight").click(function() { $("#itemLeft option").each(function() { $(this).appendTo("#itemRight"); }); }); $("#btnLeft").click(function() { $("#itemRight option:selected").each(function() { $(this).appendTo("#itemLeft"); }); }); $("#btnAllLeft").click(function() { $("#itemRight option").each(function() { $(this).appendTo("#itemLeft"); }); }); }); function sendOk() { if($("#itemRight option").length===0){ alert("받는 사람을 먼저 추가하세요"); return; } $("#itemRight option").prop("selected",true); alert("ok"); }처음 로드되면 제이쿼리를 이용해서 목록을 추가함
그리고 리스트 왔다갔다 하는거는 append() 메소드를 사용해도 되고 appendTo()메소드를 사용해도 된다.
반응형'프로그래밍 > jQuery 제이쿼리' 카테고리의 다른 글
제이쿼리 - 토글 toggle (0) 2021.11.01 제이쿼리 - 스크롤 바 다루기 (0) 2021.11.01 제이쿼리 - 직렬화 (0) 2021.10.30 제이쿼리 - 기초(4) (0) 2021.10.30 제이쿼리 - 기초(3) / 이벤트 (0) 2021.10.30
