[1018] javascript 기능 구현하기

오늘 만진 파일은 checkTD.js 파일이다. 요구사항을 만족시키기 위해서 꽤나 고생 좀 했다.

완성본은 서버가 접속이 되지 않아서 사진을 부득이하게 첨부하지 못했으나, 제대로 작동하는 모습을 볼 수 있었다.

 

var select = document.getElementsByName('select');
var howmany = document.getElementById('Howmany');
var subBtn = document.getElementsByClassName('subBtn');
//칸별로 접근을 해서 누르는 버튼에 대한 td에 접근하여 데이터 변경하기
 
//변경 버튼을 각각 이벤트를 줘서 처리하기
for(var i=0; i<subBtn.length; i++) {
 
    subBtn[i].onclick = function() {
     
    var td = this.parentNode.parentNode;    
        var Testchild = td.childNodes[3].innerHTML;
        Testchild *= 1;
          
    var much = parseInt(td.childNodes[4].childNodes[0].value);
        var mult = much * Testchild;
 
    var first = parseInt(td.childNodes[5].innerHTML);
    console.log(first);
    console.log(mult);
//    if(mult == first) {
//        alert "수량이 변경되지 않았습니다!";
//    } else {
            td.childNodes[5].innerHTML = mult;
//    }
        
    }
}
 
 
//모두 선택할 때
var allselect = document.getElementById('selectAll');
var checkboxs = document.getElementsByName('select');
var totalPrice = document.getElementById('totalPrice');
var selectText = document.getElementById('selectText');
var totalSelect = 0;
//모두 선택하기 버튼을 눌렀을 때 선택되어있으면 false 아니면 true
allselect.onclick = function() {
    if(allselect.checked == true) {
    for(var k=0; k<checkboxs.length; k++) {
        checkboxs[k].checked = true;
        }
            totalPrice.innerHTML = Total;
                selectText.innerHTML = "총 " + totalSelect + "개 상품 선택";
                totalSelect = 0;
    } else {
     for(var k=0; k<checkboxs.length; k++) {
                checkboxs[k].checked = false;
        totalSelect++;
                }
               totalPrice.innerHTML = 0;
        selectText.innerHTML = "총 0개 상품 선택";
    }    
}
 
//선택한 객체의 합계 구하기
var order = document.getElementById('order');
var Total = 0;
var checknum = 0;
 
//아이디는 영문자만 입력할 수 있도록 하기
var onlyid = document.getElementById('client_id');
var base = /^[A-Za-z0-9+]*$/; //영어만 허용하도록
 
order.onclick = function() {
     if(!base.test(onlyid.value)) {
                        alert ("아이디가 조건에 맞지 않습니다.");
        } else {
 
    for(var j=0; j<checkboxs.length; j++) {
        if(checkboxs[j].checked == true) { 
        //체크되어있는 박스가 있다면 Total에 가격더하기
            var td = checkboxs[j].parentNode.parentNode;
            Total += td.childNodes[5].innerHTML *1;    
            console.log(Total);
            checknum++;            
            }    
    }
    totalPrice.innerHTML = Total;
    selectText.innerHTML = "총 " + checknum + "개 상품 선택";     
    Total = 0;
    checknum = 0;
    }
}
 
//선택한 객체 삭제하기
var del = document.getElementById('delect');
del.onclick = function() {
    for(var i=0; i<checkboxs.length; i++){
        if(checkboxs[i].checked == true) {
            var td = checkboxs[i].parentNode.parentNode;
            td.remove();
        }
    }
}

각각 어떠한 기능을 구현했는지는 자세한 내용은 주석을 참고하면 좋을 것 같다.

오늘 구현한 내용을 간단하게 정리해보면 아래와 같다.

 

1. 테이블 안에 있는 innerHTML 값을 받아와 계산을 한다.

단, 이 값은 string값이므로 int 값으로 변환하여 연산을 수행한 뒤에 연산 수행 결과를 알맞은 칸에 넣어주었다. 이 칸에 접근하는 것도 문제였다. 클릭한 객체의 값을 parent로 접근하여 처리하였고, 원하는 칸에 접근하여 결과를 넣어줄 수 있었다. 같은 방법으로 접근하여 다른곳에서도 응용하여 사용할 수 있었다.

 

2. checkbox 제어

모두 선택 기능을 구현하고, 선택한 체크박스의 총 값을 구해 Total 값을 표시해주는 기능을 구현하였다.

체크가 되어있는지 안되어있는지의 여부에 따라 버튼을 누르면 한꺼번에 구현하는 식으로 했으나, 지금 생각해보면 누르는 바로 즉시 반응이 올수 있도록 수정을 해야할 것 같다.

 

4. 문자열 체크

담긴 문자열 값이 영어만인지 숫자도 포함되어있는지에 따라 메세지 출력의 여부가 달라진다.

이도 반응형인지 아니면 버튼을 눌렀을 때 작동하는 것인지에 따라 달라질 것 같다.

 

내일은 구현의 세부사항을 체크해가며 완벽하게 바꿔갈 예정이다. 내일까지 부디 완성하길 내 자신에게 바라본다..