코드
<!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.bound{
border-collapse: collapse;
border:1px solid yellowgreen;
height:340px;
width: 260px;
}
td.bound {
border:1px solid blue;
}
#selMenu,#selOrder,#selSales {
width: 240px;
}
</style>
<body>
<table>
<tr>
<td valign=top>
<table class='bound'>
<caption>메뉴목록</caption>
<tr>
<td colspan=2>
<select id=selMenu size=13"></select>
</td>
</tr>
<tr>
<td>메뉴명</td>
<td><input type="text" id=menuname readonly></td>
</tr>
<tr>
<td>수량</td>
<td><input type="number" id=count min=1></td>
</tr>
<tr>
<td>금액</td>
<td><input type="number" id=price readonly></td>
</tr>
<tr>
<td><button id=btnReset>비우기</button></td>
<td align="right"><button id=btnAdd>메뉴추가</button></td>
</tr>
</table>
</td>
<td valign=top>
<table class='bound'>
<caption>주문목록</caption>
<tr>
<td colspan="2">
<select id=selOrder size=13></select>
</td>
</tr>
<tr>
<td>총액</td>
<td><input type="number" id=total></td>
</tr>
<tr>
<td>모바일</td>
<td><input type=phone id=mobile size=13></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td><button id=btnCancel>주문취소</button></td>
<td align="right"><button id=btnDone>주문완료</button></td>
</tr>
</table>
</td>
<td valign=top>
<table class='bound'>
<caption>판매내역</caption>
<tr>
<td>
<select id=selSales size=17></select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<script src='https://code.jquery.com/jquery-3.5.0.js'></script>
<script>
//메뉴 최소 10개
let arMenu=[{name:'아메리카노 ',price:2000,won:' 원'},
{name:'카페모카 ',price:2800,won:' 원'},
{name:'라떼 ',price:2500,won:' 원'},
{name:'에스프레소 ',price:2000,won:' 원'},
{name:'딸기요거트스무디 ',price:3500,won:' 원'},
{name:'쿠키프라페 ',price:3800,won:' 원'},
{name:'딸기쿠키프라페 ',price:4000,won:' 원'},
{name:'딸기바나나주스 ',price:3400,won:' 원'},
{name:'얼그레이티 ',price:3000,won:' 원'},
{name:'녹차 ',price:3300,won:' 원'}
];
let toMenu=[];
let total=0;
$(document)
.ready(function(){
$.each(arMenu,function(ndx,obj){
strMenu=`<option value="${obj['name']}">${obj['name']}${obj['price']}${obj['won']}</option>`;
$('#selMenu').append(strMenu);
});
})
.on('click','#selMenu',function(){
Nm_Pr=$('#selMenu option:selected').text();
ar=Nm_Pr.split(' ');
console.log(ar);
$('#menuname').val(ar[0]);
$('#price').val(ar[1]);
$('#count').val(1)
})
.on('change','#count',function(){
C=0;
Nm_Pr=$('#selMenu option:selected').text();
ar=Nm_Pr.split(' ');
parseInt(ar[1]);
$('#price').val(ar[1]*$('#count').val());
})
.on('click','#btnReset',function(){
$('#menuname,#count,#price').val('');
})
.on('click','#btnAdd',function(){
total=0;
M=$('#menuname').val();
C=$('#count').val();
P=$('#price').val();
P=parseInt(P);
toMenu.push(P)
strOrder='<option>'+M+' '+' x'+C+' '+P+'</option>';
$('#selOrder').append(strOrder)
for(i=0;i<toMenu.length;i++){
total+=toMenu[i];
}
$('#total').val(total);
})
.on('click','#btnCancel',function(){
$('#selOrder').text('');
toMenu=[];
$('#total').val('');
})
.on('click','#btnDone',function(){
Phone=$('#mobile').val();
money=$('#total').val();
strDone='<option>'+'번호 : '+Phone+' 총액 : '+money+'원'+'</option>';
$('#selSales').append(strDone)
$('#selOrder').text('');
total=0;
toMenu=[];
$('#total,#mobile').val('');
})
</script>
</html>'국비지원학원 > Javascript' 카테고리의 다른 글
| 11.16정리 (0) | 2021.11.16 |
|---|---|
| 11.15정리 (jquery 기초) (0) | 2021.11.16 |
| 11.12 정리 (0) | 2021.11.16 |
| 11.11 정리 (0) | 2021.11.12 |
| 11.10정리(setInterval, newDate()함수) (0) | 2021.11.10 |