고정 헤더 영역
상세 컨텐츠
본문
728x90
type부분을 room 쪽의 버튼으로 나오게 하기.
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<title>호텔 객실 예약 관리 - 객실관리</title>
</head>
<style>
#add{
border-radius: 4px;
}
#delet{
border-radius: 4px;
}
#empty{
border-radius: 4px;
}
.button{
border: 2px solid lightskyblue;
background-color: lightcyan;
color: rgb(102, 187, 221);
padding: 5px;
border-radius: 5px;
}
.button:hover{
color: white;
background-color: lightskyblue;
}
a{
color: aliceblue;
}
</style>
<body>
<table style="width: 100%;border-collapse: collapse;">
<tr style="background-color: rgb(129, 206, 230);" >
<td style="width: 30%;"></a> 객실관리 <a href="book.html">예약관리</a></td>
<td style="width: 40%; text-align: left; color: aliceblue;" ><h1> 호텔 객실 예약관리</h1></td>
<td style="width: 30;"></td>
</tr>
<tr style="background-color:lightcyan;">
<td colspan="3" valign="top">
<table valign="top" align=center >
<tr>
<td colspan="3" align="right">
<select id='reservation' size="15" style="width:350px">
</select><br>
<button id="btnType" class="button">객실타입관리</button>
</td>
<td align="left">
<table valign="right">
<tr>
<td>객실번호</td><td><input type=number id=qty1 name=qty1 style="width: 120px"></td>
</tr>
<tr>
<td>객실명</td><td><input type="text" id=name name=name style="width: 120px"></td>
</tr>
<tr>
<td>객실타입</td>
<td><select id="type">
<option value="">객실타입을 선택</option>
<option value="Suite Room" name="room">Suite Room</option>
<option value="Family Room" name="room">Family Room</option>
<option value="Deluxe Room" name="room">Deluxe Room</option>
<option value="Single Room" name="room">Single Room</option>
<option value="Double Room" name="room">Double Room</option>
</select></td>
</tr>
<tr>
<td>숙박가능인원</td><td><input type=number id=people name=people style="width: 120px">명</td>
</tr>
<tr>
<td>1박요금</td><td><input type=number id=price name=price style="width: 120px">원</td>
</tr>
<tr>
<table align="center">
<td>
<button class=button id=btnadd>추가</button>
<button class=button id=btndelet>삭제</button>
<button class=button id=btnempty>비우기</button></td>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="typeDlg" style="display: none;">
<table style="width: 100%; border-collapse: collapse;">
<tr style="background-color:lightcyan;">
<td colspan="3" valign="top" >
<table valign="top" align=right style="width: 100%;">
<tr>
<td align="right">
<select size='15' style="width: 250px;" id="roomtype">
</select>
</td>
<td>
<table>
<tr><td>객실타입번호</td><td><input type=number id=qty name=qty style="width: 50px"></td></tr>
<tr><td>객실타입명</td><td><input type=name id=typename name=typename style="width: 90px"></td></tr>
<tr>
<td colspan="2" align="center">
<button class="button" id=add>추가</button>
<button class="button" id=delet>삭제</button>
<button class="button" id=empty>비우기</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="alertDlg" style="display:none;">
<label id="lblMessage"></label><br>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(document)
.on('click','#btnType',function(){
$('#typeDlg').dialog({
title:'객실타입관리',
modal:true,
width:500
})
})
.on('click','#btnadd',function(){
if($('#qty1').val()==''){
showDlg('객실번호를 입력해 주세요.');
}else if($('#name').val()==''){
showDlg('객실명을 입력해 주세요.');
}else if($('#type').val()==''){
showDlg('객실타입을 입력해 주세요.');
}else if($('#people').val()==''){
showDlg('몇명인지 입력해 주세요.');
}else if($('#price').val()==''){
showDlg('가격을 입력해 주세요.');
}else{
str='<option>'+$('#qty1').val()+'호, '+$('#name').val()+', '+$('#type').val()+', '+$('#people').val()+'명, '
+$('#price').val()+'원';
$('#reservation').append(str);
}
})
.on('click','#btndelet',function(){
$("option:selected").remove();
$('#qty1').val('');
$('#name').val('');
$('#type').find('option:first').prop('selected',true);
$('#people').val('');
$('#price').val('');
})
.on('click','#btnempty',function(){
$('#qty1').val('');
$('#name').val('');
$('#type').find('option:first').prop('selected',true);
$('#people').val('');
$('#price').val('');
})
.on('click','#reservation option:selected',function(){
str = $('#reservation option:selected').text();
ar = str.split(', ');
ar[0]=ar[0].replace('호',' ');
ar[3]=ar[3].replace('명',' ');
ar[4]=ar[4].replace('원',' ');
for(i=0;i<5;i++){
ar[i]=ar[i].trim();
}
$('#qty1').val(ar[0]);
$('#name').val(ar[1]);
$('#type option').each(function(){
if($(this).text()==ar[2]){
$(this).prop('selected',true);
return false;
}
})
$('#people').val(ar[3]);
$('#price').val(ar[4]);
})
.on('click','#add',function(){
str="<option>"+$('#qty').val()+', '+$('#typename').val();
if($('#qty').val()==''){
showDlg('번호를 입력하세요.');
}else if($('#typename').val()==''){
showDlg('객실타입을 입력하세요.')
}else{
$('#roomtype').append(str);
}
$('#qty').val('');
$('#typename').val('');
})
.on('click','#roomtype option:selected',function(){
str = $('#roomtype option:selected').text();
ar = str.split(',');
ar[1]=ar[1].trim();
$('#qty').val(ar[0]);
$('#typename').val(ar[1]);
})
.on('click','#delet',function(){
$('#qty').val('');
$('#typename').val('');
$("#roomtype option:selected").remove();
})
.on('click','#empty',function(){
$('#qty').val('');
$('#typename').val('');
})
function showDlg(str){
$('#lblMessage').text(str);
$('#alertDlg').dialog({
'title':'알림창',
'position':{'my':"left top",at:"left bottom",of:$('#add')},
'position':{'my':"left top",at:"left bottom",of:$('#btnadd')},
modal:true,
buttons:[
{
text:'OK',
click:function(){
$(this).dialog('close');
}
},
{
text:'Close',
click:function(){
alert('안닫힘');
}
}
]
});
}
</script>
</html><결과>
| 원래화면 | 바뀐화면 | |
 |
 |
|
| 객실타입관리 페이지를 빼고 버튼을 누르면 그 자리에서 dialog를 나타나게 한다. | ||
| 버튼을 누른 후 화면 | 추가를 하지 않고 누르면 | |
 |
 |
|
| room 원래코드에 type부분의 html을 <div>로 복사하고 <script>코드에 type부분의 <script>도 넣어준다. 여기서 room과 type부분의 아이디가 겹친게 있다면 서로 바꿔줘야 코드가 충돌하지 않는다. <select> 밑 부분에 버튼 하나를 추가한다. |
||
|
<button id="btnType" class="button">객실타입관리</button>
|
room부분의 처음<select>밑 부분에 버튼 추가 | |
|
<div id="typeDlg" style="display: none;">
<table style="width: 100%; border-collapse: collapse;">
<tr style="background-color:lightcyan;">
<td colspan="3" valign="top" >
<table valign="top" align=right style="width: 100%;">
<tr>
<td align="right">
<select size='15' style="width: 250px;" id="roomtype">
</select>
</td>
<td>
<table>
<tr><td>객실타입번호</td><td><input type=number id=qty name=qty style="width: 50px"></td></tr>
<tr><td>객실타입명</td><td><input type=name id=typename name=typename style="width: 90px"></td></tr>
<tr>
<td colspan="2" align="center">
<button class="button" id=add>추가</button>
<button class="button" id=delet>삭제</button>
<button class="button" id=empty>비우기</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
|
<table>이 끝나는 부분에 <div>를 추가해 type부분의 html을 집어 넣어준다. 여기서 room과 type부분의 id가 같은 부분이 있다면 확인해가면서 id를 바꿔준다. |
|
|
.on('click','#btnType',function(){
$('#typeDlg').dialog({
title:'객실타입관리',
modal:true,
width:500
})
})
|
객실타입관리의 버튼에 dialog를 넣어서 <div>를 띄워준다. | |
|
.on('click','#add',function(){
str="<option>"+$('#qty').val()+', '+$('#typename').val();
if($('#qty').val()==''){
showDlg('번호를 입력하세요.');
}else if($('#typename').val()==''){
showDlg('객실타입을 입력하세요.')
}else{
$('#roomtype').append(str);
}
$('#qty').val('');
$('#typename').val('');
})
.on('click','#roomtype option:selected',function(){
str = $('#roomtype option:selected').text();
ar = str.split(',');
ar[1]=ar[1].trim();
$('#qty').val(ar[0]);
$('#typename').val(ar[1]);
})
.on('click','#delet',function(){
$('#qty').val('');
$('#typename').val('');
$("#roomtype option:selected").remove();
})
.on('click','#empty',function(){
$('#qty').val('');
$('#typename').val('');
})
|
type부분의 <script>를 넣어준다. | |
|
function showDlg(str){
$('#lblMessage').text(str);
$('#alertDlg').dialog({
'title':'알림창',
'position':{'my':"left top",at:"left bottom",of:$('#add')},
'position':{'my':"left top",at:"left bottom",of:$('#btnadd')},
modal:true,
buttons:[
{
text:'OK',
click:function(){
$(this).dialog('close');
}
},
{
text:'Close',
click:function(){
alert('안닫힘');
}
}
]
});
}
|
<script>부분에 함수를 만들어 준다. 저 함수는 알림창을 만들어준다. |
|
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<title>호텔 객실 예약 관리 - 객실관리</title>
</head>
<style>
#add{
border-radius: 4px;
}
#delet{
border-radius: 4px;
}
#empty{
border-radius: 4px;
}
.button{
border: 2px solid lightskyblue;
background-color: lightcyan;
color: rgb(102, 187, 221);
padding: 5px;
border-radius: 5px;
}
.button:hover{
color: white;
background-color: lightskyblue;
}
a{
color: aliceblue;
}
</style>
<body>
<table style="width: 100%;border-collapse: collapse;">
<tr style="background-color: rgb(129, 206, 230);" >
<td style="width: 30%;"></a> 객실관리 <a href="book.html">예약관리</a></td>
<td style="width: 40%; text-align: left; color: aliceblue;" ><h1> 호텔 객실 예약관리</h1></td>
<td style="width: 30;"></td>
</tr>
<tr style="background-color:lightcyan;">
<td colspan="3" valign="top">
<table valign="top" align=center >
<tr>
<td colspan="3" align="right">
<select id='reservation' size="15" style="width:350px">
</select><br>
<button id="btnType" class="button">객실타입관리</button>
</td>
<td align="left">
<table valign="right">
<tr>
<td>객실번호</td><td><input type=number id=qty1 name=qty1 style="width: 120px"></td>
</tr>
<tr>
<td>객실명</td><td><input type="text" id=name name=name style="width: 120px"></td>
</tr>
<tr>
<td>객실타입</td>
<td><select id="type">
<option value="">객실타입을 선택</option>
</select></td>
</tr>
<tr>
<td>숙박가능인원</td><td><input type=number id=people name=people style="width: 120px">명</td>
</tr>
<tr>
<td>1박요금</td><td><input type=number id=price name=price style="width: 120px">원</td>
</tr>
<tr>
<table align="center">
<td>
<button class=button id=btnadd>추가</button>
<button class=button id=btndelet>삭제</button>
<button class=button id=btnempty>비우기</button></td>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="typeDlg" style="display: none;">
<table style="width: 100%; border-collapse: collapse;">
<tr style="background-color:lightcyan;">
<td colspan="3" valign="top" >
<table valign="top" align=right style="width: 100%;">
<tr>
<td align="right">
<select size='15' style="width: 250px;" id="roomtype">
</select>
</td>
<td>
<table>
<tr><td>객실타입번호</td><td><input type=number id=qty name=qty style="width: 50px"></td></tr>
<tr><td>객실타입명</td><td><input type=name id=typename name=typename style="width: 90px"></td></tr>
<tr>
<td colspan="2" align="center">
<button class="button" id=add>추가</button>
<button class="button" id=delet>삭제</button>
<button class="button" id=empty>비우기</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="alertDlg" style="display:none;">
<label id="lblMessage"></label><br>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(document)
.on('click','#btnType',function(){
$('#typeDlg').dialog({
title:'객실타입관리',
modal:true,
width:500,
beforeClose:function(){
$('#type option').remove();
$('#type').append('<option value="room1" selected>객실타입을 선택</option>');
for(i=0;i<$('#roomtype option').length;i++){
str=$('#roomtype option:eq('+i+')').text();
ar=str.split(',');
ar[1]=ar[1].trim();
str2='<option value='+ar[0]
console.log(str2);
str1='<option>'+ar[1]+'</option>';
$('#type').append(str1);
}
}
})
})
.on('click','#btnadd',function(){
if($('#qty1').val()==''){
showDlg('객실번호를 입력해 주세요.');
}else if($('#name').val()==''){
showDlg('객실명을 입력해 주세요.');
}else if($('#type').val()==''){
showDlg('객실타입을 입력해 주세요.');
}else if($('#people').val()==''){
showDlg('몇명인지 입력해 주세요.');
}else if($('#price').val()==''){
showDlg('가격을 입력해 주세요.');
}else{
str='<option>'+$('#qty1').val()+'호, '+$('#name').val()+', '+$('#type').val()+', '+$('#people').val()+'명, '
+$('#price').val()+'원';
$('#reservation').append(str);
}
})
.on('click','#btndelet',function(){
$("reservation option:selected").remove();
$('#qty1').val('');
$('#name').val('');
$('#type').find('option:first').prop('selected',true);
$('#people').val('');
$('#price').val('');
})
.on('click','#btnempty',function(){
$('#qty1').val('');
$('#name').val('');
$('#type').find('option:first').prop('selected',true);
$('#people').val('');
$('#price').val('');
})
.on('click','#reservation option:selected',function(){
str = $('#reservation option:selected').text();
ar = str.split(', ');
ar[0]=ar[0].replace('호',' ');
ar[3]=ar[3].replace('명',' ');
ar[4]=ar[4].replace('원',' ');
for(i=0;i<5;i++){
ar[i]=ar[i].trim();
}
$('#qty1').val(ar[0]);
$('#name').val(ar[1]);
$('#type option').each(function(){
if($(this).text()==ar[2]){
$(this).prop('selected',true);
return false;
}
})
$('#people').val(ar[3]);
$('#price').val(ar[4]);
})
.on('click','#add',function(){
str="<option>"+$('#qty').val()+', '+$('#typename').val();
if($('#qty').val()==''){
showDlg('번호를 입력하세요.');
}else if($('#typename').val()==''){
showDlg('객실타입을 입력하세요.')
}else{
$('#roomtype').append(str);
}
$('#qty').val('');
$('#typename').val('');
})
.on('click','#roomtype option:selected',function(){
str = $('#roomtype option:selected').text();
ar = str.split(',');
ar[1]=ar[1].trim();
$('#qty').val(ar[0]);
$('#typename').val(ar[1]);
})
.on('click','#delet',function(){
$('#qty').val('');
$('#typename').val('');
$("#roomtype option:selected").remove();
})
.on('click','#empty',function(){
$('#qty').val('');
$('#typename').val('');
})
function showDlg(str){
$('#lblMessage').text(str);
$('#alertDlg').dialog({
'title':'알림창',
'position':{'my':"left top",at:"left bottom",of:$('#add')},
'position':{'my':"left top",at:"left bottom",of:$('#btnadd')},
modal:true,
buttons:[
{
text:'OK',
click:function(){
$(this).dialog('close');
}
},
{
text:'Close',
click:function(){
alert('안닫힘');
}
}
],
});
}
</script>
</html><결과>
| 객실타입이 비어있다 | 객실타입관리를 눌러 저장 |
 |
 |
| 객실타입관리를 나가게 되면 이렇게 객실타입에 저장 | 값이 잘 들어가고 나온다 |
 |
 |
|
.on('click','#btnType',function(){
$('#typeDlg').dialog({
title:'객실타입관리',
modal:true,
width:500,
beforeClose:function(){
$('#type option').remove();
$('#type').append('<option value="room1" selected>객실타입을 선택</option>');
for(i=0;i<$('#roomtype option').length;i++){
str=$('#roomtype option:eq('+i+')').text();
ar=str.split(',');
ar[1]=ar[1].trim();
str2='<option value='+ar[0]
console.log(str2);
str1='<option>'+ar[1]+'</option>';
$('#type').append(str1);
}
}
})
})
|
beforeClose:function()을 써서 객실타입 dialog를 닫으면 type option값이 지워지면서 객실타입을 선택하라는 옵션 하나 넣어주고 for문 돌려서 roomtype option:selected를 넣으면 값이 넣어지지 않아서 option:eq(+i+)를 통해 하나씩 넣어준다. 넣어준 값 ' , '로 나누고 값을 type option에 넣어준다. |
.val() .val(str)
.text() .text(str)
.html() .html('<input type=button>');
.css() .css('color', 'red');
.css({'color':'red', 'border':'1px solid green'})
<오름차순 정렬(table)>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table{border-collapse: collapse; align:center;}
td{width: 40px; height: 40px; border: 1px solid lightblue; text-align: center;}
</style>
<body align='center'>
<table align='center' id="table1">
<tr>
<td>10</td><td>-5</td><td>3</td><td>7</td><td>1</td><td>0</td><td>-6</td><td>4</td><td>9</td><td>2</td>
</tr>
</table><br>
<button id="btnStartSort">정렬시작</button>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//오름차순 정렬
$(document)
.on('click','#btnStartSort',function(){
setInterval(function(){
sort();
},50);
})
var sec=0;
function sort(){
for(i=0;i<$('td').length-1;i++){
for(j=i+1;j<$('td').length;j++){
a=parseInt($('td:eq('+i+')').text());
b=parseInt($('td:eq('+j+')').text());
if(a>b){
$('td:eq('+i+')').text(b);
$('td:eq('+j+')').text(a);
return;
}
}
}
}
</script>
</html><결과>
| 첫화면 | 정렬시작을 누르고 나서 |
 |
 |
| for(i=0;i<$('td').length-1;i++){ for(j=i+1;j<$('td').length;j++){ a=parseInt($('td:eq('+i+')').text()); b=parseInt($('td:eq('+j+')').text()); if(a>b){ $('td:eq('+i+')').text(b); $('td:eq('+j+')').text(a); return; } } } |
parseInt()를 하지 않으면 값이 뒤죽박죽 섞이므로 조심한다. 꼭 parseInt()를 넣어줘야 한다. |
| .on('click','#btnStartSort',function(){ setInterval(function(){ sort(); },50); }) |
애니메이션...인데.. 내가 원하는 애니메이션은.. 안나와서 포기... |
나는야 멍청이.. 알 수가 없네
728x90
'Javascript' 카테고리의 다른 글
| 2023.02.02 (0) | 2023.02.02 |
|---|---|
| 2023.02.01-로그인/호텔 (0) | 2023.02.01 |
| 2023.01.31-카페관리 (0) | 2023.02.01 |
| 2023.01.30 (0) | 2023.01.30 |
| 2023.01.27 (0) | 2023.01.27 |
