POST방식으로 idx 넘기기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*,user.domain.*"%>
<jsp:include page="/top.jsp"/>
<!-- UserDAO빈을 useBean액션을 이용해서 생성 -->
<jsp:useBean id="userDAO" class="user.persistence.UserDAO" scope="session"/>
<div class="text-left p-5">
<h1>User List [Admin Page]</h1>
<table class="table table-striped mt-5">
<tr>
<th>번호</th>
<th>이름</th>
<th>아이디</th>
<th>연락처</th>
<th>회원상태</th>
<th>수정|삭제</th>
</tr>
<!-- -->
<%
List<UserVO> arr=userDAO.listMember();
if(arr!=null){
for(UserVO user:arr){
%>
<tr>
<td><%=user.getIdx() %></td>
<td><%=user.getName() %></td>
<td><%=user.getUserid() %></td>
<td><%=user.getAllHp() %></td>
<td><%=(user.getMstate()==0)? "일반회원":(user.getMstate()==1) ? "정지회원":"탈퇴회원"%></td>
<td><a href="#" onclick="edit('<%=user.getIdx()%>')">수정</a>|<a href="javascript:del('<%=user.getIdx()%>')">삭제</a></td>
</tr>
<!-- -->
<%
}
}
%>
</table>
<!--삭제/수정 관련 폼-->
<form name="frm" method="POST">
<input type="text" name="idx" id="idx">
</form>
</div>
<script type="text/javascript">
var del=function(midx){
var yn=confirm(midx+"번 회원 정보를 정말 삭제할까요?");
if(yn){
location.href="memberDel.jsp?idx="+midx; //get방식
frm.idx.value=midx;
frm.action="memberDel.jsp";
frm.metho="POST";
frm.submit();
}
}
var edit=function(midx){
$("#idx").val(midx);
$('form[name="frm"]').prop("method","POST")
.prop("action","memberEdit.jsp")
.submit();
}
</script>
<jsp:include page="/foot.jsp"/>//html 속성은 attr(), javascript 속성은 prop()을 사용한다.
모듈화 jsp
소스를 포함시키는 방식으로 function.jsp를 포함
<%@ include file="/include/function.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--
사용자 정의 메소드 모아두는 페이지
- 사용자 정의 메소드는 선언문 <%! %>dptj rngusgksek.
- 선언문에서는 내장객체 (ex, out, request, response, session등)를 사용할 수 없다.
내장객체들은 스크립트렛(<%%>) 태그 안에서 선언된 지역변수 이므로 사용 불가
--%>
<%!
//선언문(declaration)
public void goUrl(String msg, String loc, JspWriter jw) throws Exception{
jw.println("<script>");
jw.println("alert('"+msg+"')");
jw.println("location.href='"+loc+"'");
jw.println("</script>");
}
public void goBack(String msg, JspWriter jw) throws Exception{
jw.println("<script>");
jw.println("alert('"+msg+"')");
jw.println("history.back()");
jw.println("</script>");
}
%>ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
jQuery 요소추가
새로운 요소(element) 생성시 : $() jQuery 함수에 생성할 요소를 문자열로 준뒤, 이 요소를 붙인다. 붙일 때는
1) 선택자.append("새로 생성할 요소")
2) $("새로 생성할 요소").appendTo(선택자)
==> 문자열을 특정 요소 뒤에 붙인다.
3) prepend()
4) prependTo()
==>문자열을 특정 요소 앞에 붙인다.
5) before()
6) insertBefore()
7) after()
8) insertAfter()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.5.1.min.js"></script>
<style>
body{
font-size : 11pt;
font-family: sans-serif;
}
ul li{
border : 1px #abcdef solid;
margin : 10px;
padding : 10px;
width : 50%;
list-style: none;
font-weight: bold;
}
ul li.selected{
background-color: #cccccc;
}
</style>
<script>
$(function(){
$('#add1').click(function(){
var cnt = $('ul.menu li').length;
//$('ul.menu').append("<li>menu"+(cnt+1)+"</li>");
var $item = $("<li>New Menu"+(++cnt)+"</li>");
$item.appendTo('ul.menu');
})
//#add2버튼 클릭시 새로운 메뉴가 맨 앞에 붙도록
$('#add2').click(function(){
$('ul.menu').prepend("<li>new menu</li>");
})
//class가 selected인 요소 앞에 새로운 메뉴를 추가
$('#add3').click(function(){
var $item = $("<li>New Menu</li>");
$('ul li.selected').before($item)
})
//class가 selected인 요소 뒤에 새로운 메뉴를 추가
$('#add4').click(function(){
var $item = $("<li>New Menu</li>");
$('ul li.selected').after($item)
})
})
</script>
</head>
<body>
<h1>DOM 생성</h1>
<button id="add1">추가1(append)</button>
<button id="add2">추가2(prepend)</button>
<button id="add3">추가3(before)</button>
<button id="add4">추가4(after)</button>
<ul class="menu">
<li>menu1</li>
<li>menu2</li>
<li class="selected">menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</body>
</html>tab실습
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//[1]첫번째 탭에 해당 하는 내용만 보여주기
//아이디가 tab1이 아닌 li요소는 감추기
$(".panel>li").not("#tab1").hide();
//hasClass('클래스명') : 해당 클래스를 가지고 있는지 여부를 true, false로 반환
//toggleClass('클래스명') : 해당 클래스를 가지고 있으면 remove하고
// : 해당 클래스가 없음녀 addClass()함
$(".tab>li>a").click(function(){
//alert($(this).hasClass('selected'));
$(".tab>li>a").removeClass("selected");
if(!$(this).hasClass('selected')){
$(this).addClass("selected");
}
//클릭한 요소의 href 알아내기
var showId = $(this).attr('href');
$('ul.panel li').slideUp(2000);
$(showId).slideDown(2000);
})
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#container{
width:500px;
margin:50px auto;
}
ul.tab{
padding:0;
}
ul.tab li{
list-style-type:none;
width:100px;
height:40px;
float:left;
}
ul.tab li a{
outline:none;
background:url("../images/tab.jpg");
display:block;
color:blue;
line-height:40px;
text-align:center;
}
ul.tab li a.selected{
background:url("../images/tab_selected.jpg");
text-decoration:none;
color:#333;
cursor:default;
}
ul.panel{
clear:both;
border:1px solid #9FB7D4;
border-top:none;
padding:0;
}
ul.panel li{
list-style-type:none;
padding:10px;
text-indent:1em;
color:#333;
}
</style>
</head>
<body>
<div id="container">
<ul class="tab">
<li><a href="#tab1" class="selected">JavaScript</a></li>
<!--<li><a href="#tab2">CSS</a></li>-->
<li><a href="#tab2">CSS</a></li>
<li><a href="#tab3">HTML</a></li>
<li><a href="#tab4">jQuery</a></li>
<li><a href="#tab5">XHTML</a></li>
</ul>
<ul class="panel">
<li id="tab1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue elit eu mauris sollicitudin dictum. Phasellus nec felis ut arcu placerat tincidunt. Vestibulum luctus mauris ac ante molestie eleifend. Quisque dapibus nulla ac purus volutpat posuere a quis nisl. Nam condimentum purus vitae nibh feugiat imperdiet. Cras purus mi, egestas vitae imperdiet volutpat, suscipit nec odio. Maecenas elementum aliquam metus nec ultrices. Suspendisse potenti. Praesent lobortis gravida massa in volutpat. Nunc id mauris id orci congue malesuada. Aliquam vel mauris risus, sit amet laoreet sapien. Maecenas varius gravida purus vel pharetra. Sed quis leo id mi laoreet accumsan. Vestibulum ac mauris purus, nec rutrum sem. Sed euismod magna a lacus consectetur in mattis quam suscipit. Phasellus nec enim libero. Donec sit amet justo diam. In hac habitasse platea dictumst. Sed nibh libero, iaculis eget aliquet eu, rhoncus nec ligula.
</li>
<li id="tab2">
Nam cursus molestie erat, a sodales erat sollicitudin ut. Maecenas nec urna mi, eu congue turpis. Duis vitae volutpat lorem. Ut vulputate tempor elit, vitae iaculis elit sollicitudin at. Ut gravida fermentum tempor. Mauris metus ante, volutpat et porta a, malesuada vel purus. In lobortis ullamcorper lorem eu malesuada. Nullam sollicitudin, urna eu euismod suscipit, eros sapien adipiscing arcu, sit amet ultricies lacus elit sed urna. Nam scelerisque, nulla eu mollis elementum, ipsum tortor ullamcorper felis, eget laoreet diam turpis dignissim metus. In eget lectus sit amet mi pretium pellentesque varius vitae augue. Integer mattis, elit nec adipiscing rhoncus, elit tellus congue sapien, et auctor mi nisi in purus. Curabitur commodo, neque sed ornare porta, purus magna rhoncus eros, quis consectetur ipsum erat ac mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce sed turpis tortor, quis euismod enim. Integer faucibus venenatis egestas. Etiam eu metus et sem bibendum fermentum. Sed dui ante, sollicitudin at tincidunt at, pretium sit amet diam. Nunc porttitor tristique est sed pulvinar. Fusce eu ligula vitae orci venenatis sagittis sed quis ipsum.
</li>
<li id="tab3">
Pellentesque in metus leo. Praesent porta, dolor nec mattis ullamcorper, velit purus mollis enim, nec tincidunt magna massa ornare elit. In ipsum enim, pellentesque vitae gravida ultrices, aliquet nec ante. Mauris sed nunc ut ligula dictum convallis vel et nunc. Aenean eget enim vitae nulla lacinia consequat. Quisque blandit, ante vel sodales sollicitudin, neque ante elementum leo, ut consequat dui risus ut purus. Vestibulum viverra lacus at felis dignissim bibendum. Maecenas interdum nisl eu metus porta luctus. Suspendisse nulla neque, ultricies nec facilisis nec, mollis id sapien. Donec nec quam et felis pulvinar fringilla a non orci. Maecenas tincidunt magna a sem faucibus eu interdum magna aliquam. Suspendisse a diam lorem, nec malesuada sapien. Nam a scelerisque velit. Integer commodo malesuada odio, sit amet rutrum ante viverra ut. In egestas, arcu id pretium tempus, ligula nibh interdum enim, non bibendum velit felis sed augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent augue eros, posuere pharetra pharetra eu, feugiat eu velit.
</li>
<li id="tab4">
Vestibulum a quam scelerisque odio ultricies mollis eget a leo. Morbi dictum, velit lobortis hendrerit tincidunt, lacus nisl rhoncus felis, commodo sollicitudin magna augue non est. Nunc in felis quis purus dignissim blandit vel ut erat. In hac habitasse platea dictumst. Nullam euismod auctor rhoncus. Proin et sem ac neque placerat vulputate. Nullam consequat purus eget libero posuere pulvinar. Aenean luctus luctus leo nec vehicula. Praesent eleifend nibh sed neque vestibulum hendrerit. Nulla suscipit vehicula sem, quis congue ligula gravida vel. Aliquam risus urna, pretium eget porttitor hendrerit, gravida at libero. Curabitur nec luctus risus. Etiam ullamcorper fringilla nisl hendrerit convallis. Duis in nibh tellus. Donec porta nibh id purus mollis sodales. Nam eget libero vel metus congue ultricies ut vitae nibh. Sed ac justo ac eros luctus ullamcorper ut tincidunt nibh. Fusce dapibus bibendum urna, id tempor turpis sodales sed. Nam dui purus, posuere vel placerat eu, posuere non magna.
</li>
<li id="tab5">
Vestibulum consequat consequat aliquet. Aenean ut nunc dolor, vel dictum mauris. Proin neque eros, tincidunt at faucibus a, dapibus sit amet tellus. Etiam rutrum pharetra risus porta ullamcorper. Nunc convallis orci at massa suscipit porta. Sed interdum suscipit dui, eu sodales odio fermentum vitae. Nunc vitae dui metus, a laoreet ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eu mauris mi, non blandit tortor. Ut fringilla cursus justo id porta. Sed in nibh nulla. Aenean consectetur arcu vel eros facilisis ac luctus lectus placerat. Fusce risus dui, adipiscing ut tempus non, malesuada quis velit.
</li>
</ul>
</div>
</body>
</html>'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 65일차 - JSP 로그인, 로그아웃, 세션, 관리자 jQuery event 제거, 이벤트 버블링 (0) | 2020.07.15 |
|---|---|
| 국비지원 64일차 - JSP 페이징 처리, jQuery DOM삭제 (0) | 2020.07.14 |
| 국비지원 62일차 - Bean scope , 우편번호검색, jQuery DOM 탐색 메소드, 실습 (0) | 2020.07.10 |
| 국비지원 61일차 - JSP 이동방식(redirect, forward), Beans, jQuery 필터링, attr (jQuery의 setter, getter), effect (0) | 2020.07.09 |
| 국비지원 60일차 - JSP 회원가입, 요청정보, jQuery 내용필터, 보안필터, 선택필터 (0) | 2020.07.08 |