Visit History

Today
Yesterday
Total
  • 홈
  • 방명록
  • 안녕 (289)
    • 프로그래밍 (196)
      • JAVA 자바 (50)
      • Python 파이썬 (11)
      • Linux 리눅스 (7)
      • Spring 스프링 (19)
      • DBMS (33)
      • HTML & CSS (24)
      • JavaScript 자바스크립트 (26)
      • jQuery 제이쿼리 (13)
      • JSP (7)
      • AutoHotkey 오핫 (3)
      • GitHub 깃허브 (3)
    • 알고리즘 (51)
    • 트러블슈팅 (16)
    • 프로젝트 (15)
      • 개인 프로젝트 (8)
      • [API] auto post (7)
    • 기타 (7)
      • 이야기 (3)
  • 깃허브
  • 트위터
  • 인스타그램

인기 포스트

최근 댓글

ABOUT ME

Full Stack, SW Dev

컨텐츠 검색
  • 제이쿼리 - 응용(댓글, 답글, 리스트 옮기기)
    프로그래밍/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">&nbsp;</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;"> &gt; </button>

    		    <button type="button" class="btn" id="btnAllRight" style="display:block;width:80px;"> &gt;&gt; </button>

    		    <button type="button" class="btn" id="btnLeft" style="display:block;width:80px;"> &lt; </button>

    		    <button type="button" class="btn" id="btnAllLeft" style="display:block;width:80px;"> &lt;&lt; </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

    관련글 관련글 더보기

    • 제이쿼리 - 토글 toggle
    • 제이쿼리 - 스크롤 바 다루기
    • 제이쿼리 - 직렬화
    • 제이쿼리 - 기초(4)

    댓글

인기 포스트

최근 댓글

ABOUT ME

Full Stack, SW Dev

LINK

GitHub

ADMIN

admin 글쓰기
Copyright 2021. qkqajfl007@naver.com. All rights reserved.

티스토리툴바

    i

    안녕하세요

    FHD(1920 x 1080) 해상도에서
    더 완벽한 스킨을 볼 수 있습니다.

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.