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";
}
}
}
명확성을 위해 작동 스 니펫 또는 JSFiddle을 제공하십시오. –