티스토리 뷰

HTML&CSS&Javscript&Jquery

190823 each문 써서 리터럴객체 배열에 등록하기

猫猫 2019. 8. 23. 17:00
반응형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    
        var ob= {id:"", name:"", pw:""};//리터럴 객체(키:밸류)형식
        var arr =[]; //리터럴객체를 배열형태로 저장할거라 빈 배열

        $(document).ready(function(){

            $("#bt").click(function(){ //버튼 클릭시 마다 이벤트 발생
                var a = $("#id").val(); //텍스트박스 id의 val 가져옴
                var b =$("#name").val(); //텍스트박스 name의val 가져옴
                var c = $("#pw").val();//텍스트박스 pw의 val 가져옴

                $.each(ob,function(index, item){ //each(객체,기능(객체의키, 벨류)
                    if(index == "id") ob.id = a; (키가 id면 객체의 id에 a값 넣을거임)
                    else if(index =="name") ob.name = b; (키가 name이면 객체의 name에 b넣음)
                    else if(index =="pw") ob.pw=c;(키가 pw면 객체의 pw에 c넣음)
                    //이러면 ob 객체의 각 키에 벨류 설정됨
                });
                arr.push(ob); //배열로 관리할거라 객체를 배열에 push함
                console.log(arr); //확인용
            });
  });
    </script>
</head>
<body>
    <input type="text" id="id">
    <input type="text" id="pw">
    <input type="text" id="name">
    <input type="button" id="bt" value="click">
    
</body>
</html>

뭐 더 좋은 방법이 있겠지..

반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

190823 두번째 문제-회원가입/로그인 구현  (0) 2019.08.23
190823 첫번째 문제  (0) 2019.08.23
190820 과정평가형 시험 예상문제  (0) 2019.08.20
190809 클래스 있없 체크하기  (0) 2019.08.09
190809 클릭 시 이미지 변화하기  (0) 2019.08.09