2023.02.02

Javascript

by 연을 2023. 2. 2. 17:30

728x90

<each문을 for문으로 만들어 볼때의 예>

each() : 배열을 관리

each문	for문
total=0; $('#type option').each(function(){ str=$(this).text(); ar=str.split('/'); total += parseInt(ar[2]); }) $('#total').val(total);	total=0; for(i=0;i<$('#type option').lenght;i++){ str=$('#type option).eq(i).text(); ar=str.split('/'); total+=parseInt(ar[2]); } $('#total').val(total);

cookie : WB 관리하는 I/O(local file)

key, value : setCookie(k,v)

str(value) = getCookie(k)

현재 지원을 안해서 pass

<알림창 코드 만들기>

<!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 brown;
        background-color: beige;
        color: brown;
        padding: 5px;
    }
    .button:hover{
        color: white;
        background-color: brown;
    }
    a{
        color: white;
    }
</style>
<body>
    <table style="width: 100%; border-collapse: collapse;">
        <tr style="background-color:burlywood;">
            <td style="width: 30%;">객실타입관리&nbsp;<a href="room.html">객실관리</a>&nbsp;<a href="book.html">예약관리</a></td>
            <td style="width: 40%; text-align: left; color:white;" ><h1>&nbsp;호텔 객실 예약관리</h1></td>
            <td style="width: 30;"></td>
        </tr>
        <tr style="background-color: beige;">
            <td colspan="3" valign="top" >
                <table valign="top" align=right style="width: 100%;">
                <tr>
                    <td align="right">
                        <select size='50' style="width: 250px;" id="roomtype">
                        </select>
                    </td>
                    <td>
                        <table>
                            <tr><td>객실타입번호</td><td><input type=number id=qty name=qty style="width: 120px"></td></tr>   
                            <tr><td>객실타입명</td><td><input type=name id=typename name=typename style="width: 120px"></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 id="alertDlg" style="display:none;">
        <label id="lblMessage"></label><br>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $(document)
    .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','select',function(){
        str = $('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('');
        $("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')},
            modal:true,
            buttons:[
                {
                    text:'OK',
                    click:function(){
                        $(this).dialog('close');
                    }
                },
                {
                    text:'Close',
                    click:function(){
                        alert('안닫힘');
                    }
                }
            ]
        });
    }
</script>

</html>

<결과>

alert였을때	알림창으로 바꼈을 때

추가된 내용
<link rel="stylesheet" href="http://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">	jquery에서는 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> 이렇게 나와있어서 그냥 그대로 썼다가 느려지고 알림창도 제대로 나오지 않음 꼭 http:쓸것!
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>	얘도 넣어야 한다.
<div id="alertDlg" style="display:none;"> <label id="lblMessage"></label><br> </div>	알림창 디자인
function showDlg(str){ $('#lblMessage').text(str); $('#alertDlg').dialog({ 'title':'알림창', 'position':{'my':"left top",at:"left bottom",of:$('#add')}, modal:true, buttons:[ { text:'OK', click:function(){ $(this).dialog('close'); } }, { text:'Close', click:function(){ alert('안닫힘'); } } ] }); }	함수를 넣어서 알림창 보이

바쁘다.. 마지막에...

728x90

'Javascript' 카테고리의 다른 글

2023.02.03 (0)	2023.02.03
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