0

두 개의 서로 다른 검색 입력에 연결된 함수가 있습니다. 내 for 루프에서 행을 통과하고 검색 입력이 사용 된 첫 번째 또는 세 번째 열을 필터링합니다. 루프에 두 개의 if 문이 있다고 느끼지 않는다면 어떻게 리팩토링 할 수 있습니까?for 루프 및 다중 else if 문을 사용한 리 팩터 함수

// attach keyup event listener to input 
document.getElementById("search-rule").addEventListener("keyup", searchVehicle); 
document.getElementById("search-region").addEventListener("keyup", searchVehicle); 

var ruleEl = document.getElementById("search-rule"); 

function searchVehicle(event) { 
    // convert input to uppercase 
    var filter = event.target.value.toUpperCase(); 
    // select rows in tbody 
    var rows = document.querySelector("#myTable tbody").rows; 
    // loop through the rows 
    // if the input searches by rule, search the first column 
    // else search the 3rd column (region) 
    // if in input show the row, if not in input, hide row 
    for (var i = 0; i < rows.length; i++) { 
    if (event.target === ruleEl) { 
     var colRule = rows[i].cells[0].textContent.toUpperCase(); 
    } else { 
     var colRule = rows[i].cells[2].textContent.toUpperCase(); 
    } 
    if (colRule.indexOf(filter) > -1) { 
     rows[i].style.display = ""; 
    } else { 
     rows[i].style.display = "none"; 
    }  
    } 
} 
+0

명확성을 위해 작동 스 니펫 또는 JSFiddle을 제공하십시오. –

답변

1

당신은 디스플레이 속성을 설정 삼항 문을 사용할 수 있습니다 :

rows[i].style.display = (colRule.indexOf(filter) > -1) ? "" : "none"; 

나는 또한 함수의 상단에있는 colRule VAR를 선언 만 재 선언이 아니라, 루프에 할당 할 그것.

+0

감사합니다. – MegsD