为什么我的过滤器不起作用

Question

我正在制作一个能够显示实时搜索的过滤器。基本上它会隐藏表的其他trs，除了那些匹配输入字段输入的那些。它工作正常，但当我尝试在表中搜索表时它停止工作。我对这个问题一无所知。

我的HTML：

<table class="w3-table w3-striped w3-bordered w3-border w3-margin-top" id="mainTable" width="100%">
<tr class="tr">
<td class="td-head">bnc</td>
<td style="text-align: right"><button class="w3-btn w3-teal w3-round-xxlarge arrow" onclick="toggle('Tcol1')" > <span>More </span></button></td>
</tr>
<tr>
<td colspan="2">
  <table class="w3-table subTable" id="Tcol1" style="display: none; font-size: 80%;">
    <tr>
        <td class="va-bottom"> Branch Code </td><td class="w3-right td-big"> bc02 </td>
    </tr>
    <tr>
        <td> IP Adress </td><td class="w3-right"> ip03 </td>
    </tr> 
    <tr>
        <td> IP Phone </td><td class="w3-right"> ipp04 </td>
    </tr>
    <tr>
        <td> Net Agent </td><td class="w3-right"> na005 </td>
    </tr>
   </table>
   </td>
   </tr>

<tr class="tr">
<td class="td-head">bn</td>
<td style="text-align: right"><button class="w3-btn w3-teal w3-round-xxlarge arrow" onclick="toggle('Tcol2')" > <span>More </span></button></td>
 </tr>
<tr>
<td colspan="2">
  <table class="w3-table subTable" id="Tcol2" style="display: none; font-size: 80%;">
    <tr>
        <td class="va-bottom"> Branch Code </td><td class=" w3-right td-big"> bc02 </td>
    </tr>
    <tr>
        <td> IP Adress </td><td class="w3-right"> ip03 </td>
    </tr>
    <tr>
        <td> IP Phone </td><td class="w3-right"> ipp04 </td>
    </tr>
    <tr>
        <td> Net Agent </td><td class="w3-right"> na005 </td>
    </tr>
  </table>
  </td>
 </tr>
</table></div>

我的JavaScript：

 function myFunction() {
 var input, filter, table, tr, td, subTable, subtr, subtd, i;
 input = document.getElementById("myInput");
 filter = input.value.toUpperCase();
 table = document.getElementById("mainTable");
 subTable = document.getElementByClassName("subTable");
 tr = table.getElementsByClassName("tr");
 subtr = subTable.getElementsByTagName("tr");

for (i = 0; i < tr.length || i< subtr.length; i++) {
  td = tr[i].getElementsByTagName("td")[0];
  subtd = subtr[i].getElementsByTagName("td")[1];

    if (td, subtd) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1 || subtd.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
     } else {
        tr[i].style.display = "none";
     }
   }
 }
}