프로그래밍/jQuery 제이쿼리
제이쿼리 - 응용(댓글, 답글, 리스트 옮기기)
Heidong
2021. 11. 1. 19:09
반응형
<!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()메소드를 사용해도 된다.
반응형