При фильтрации таблиц с Javascript я пытаюсь скрыть всю таблицу, когда нет видимых tr, получаю странные результаты

Question

Новичок на JS и код работают в целом. У меня есть страница, содержащая несколько таблиц, и в настоящее время я могу фильтровать их, но когда все tr отфильтрованы, заголовок таблицы все еще виден.

Я пробовал несколько разных способов и самое близкое, что я получил (хотя и при нарушении фильтрации), - это возможность отфильтровать только все, кроме последней строки в таблице, и скрыть таблицы, не содержащие видимых строк.

Я уверен, что есть это очень простое решение, но я огляделся и не смог найти решение или ответ в другом месте.

Fiddle здесь. Я чувствую, что это что-то из того, как я просматриваю таблицы, но не могу определить проблему.

Заранее спасибо.

https://jsfiddle.net/nag1872s/

document.querySelector('#city-search').addEventListener('keyup', cityFilter, false);

function cityFilter() {
const alltables = document.querySelectorAll("table[data-name=city-table]");
const input = document.getElementById("city-search");
const filter = input.value.toUpperCase();
alltables.forEach((table) => {
    const tableRows = table.getElementsByTagName("tr");
      for(let i = 0; i < tableRows.length; i++) {
      const td1 = tableRows[i].getElementsByTagName("td")[1];
      const td2 = tableRows[i].getElementsByTagName("td")[2];
      
       if (td1 || td2) {
            tableRows[i].style.display = (td1 && td1.textContent.toUpperCase().indexOf(filter) > -1 ||
                                   td2 && td2.textContent.toUpperCase().indexOf(filter) > -1 ? "" : "none");
        }
    }
});

}