[WebSquare 웹스퀘어-JavaScript 자바스크립트] 검색 기능 만들기

< input 박스에 원하는 단어 입력 후 조회하여 추출하는 법  >

 

 

 

방법 1

 

- 크롬 개발자 모드로 클래스명과 구조 파악

 

- 대소문자를 구분하지 않고 가져오기 위해 toUpperCase()로 모두 대문자로 변환해 변수에 담기

 

- 제외할 리스트가 있다면 classList이용

 

- 목록을 for문으로 돌려 tr[i]의 td[j] 번째를 이용하여 값을 가져옴

 

-비교를 위해 cell의 값도 대문자로 바꿔준 후 .indexOf()로 검색한 값이 있는지 없는지 확인 (값이 없을 경우 -1로 반환)

 

- 검색된 건수를 확인하기 위해 count를 이용

 

[JavaScript 자바스크립트] classList 사용 - 여러개의 클래스 중 특정 클래스 추출

[JavaScript 자바스크립트] indexOf 란 ?

function filter() {
	
        var count = 0;
        var input, filter, table, tr, td, cell, i, j, isExist;

        input = document.getElementById("input박스 아이디");
        filters = input.value.toUpperCase();
        table = document.getElementById("테이블 아이디");
        tr = table.getElementsByTagName("테이블의 tr 태그");

        for (i = 2; i < tr.length; i++) {

            tr[i].style.display = "none";
            td = tr[i].getElementsByTagName("테이블의 td 태그");
            isExist = tr[i].classList.contains("제외할 리스트 클래스명");

            for (j = 0; j < td.length; j++) {
                cell = tr[i].getElementsByTagName("td")[j];

                if (cell) {
                    if (cell.innerHTML.toUpperCase().indexOf(filters) > -1) {

                        count++;

                        if (isExist === false) {
                            tr[i].style.display = "";
                            break;
                            
                        } else if (isExist === true) {
                            tr[i].style.display = "none";

                        }
                    }
                }
            }
        }
        //console.log(count); //검색 건수 확인용도
        textbox2.setValue(count); 
};

 

 

방법2

 

< 방법1과 다른점 : 추출할 문장이 <td>안에 <nobr> 속에 있다면 ..! >

 

- querySelector로 정확히 명시

 

[JavaScript 자바스크립트] querySelector / querySelectorAll / getElementById란 ?

function filter() {

            var value, item, code, codeDetail, i, isExist;
            var count = 0;

            value = document.getElementById("input박스 아이디").value.toUpperCase(); 
            item = document.getElementsByClassName("table 영역의 tr 클래스명");

            for (i = 0; i < item.length; i++) {

                isExist = item[i].classList.contains("제외할 리스트 클래스명");

                if (!isExist) { // false
                    code = item[i].querySelector(".mf_0_ > nobr"); // 추출1
                    codeDetail = item[i].querySelector(".mf_1_ > nobr"); // 추출2

                    if (code.innerText.toUpperCase().indexOf(value) > -1) { // 추출1과 일치
                        count++;
                        item[i].style.display = "";

                    } else if (codeDetail.innerText.toUpperCase().indexOf(value) > -1) { // 추출2와 일치
                        count++;
                        item[i].style.display = "";
                        
                    } else {
                        item[i].style.display = "none";
                    }
                }
            } 
            //console.log(count); //검색 건수 확인용도
            textbox2.setValue(count);
        };