如何为表格每列添加独立搜索栏？现有代码仅最后一栏有效

我制作了一个表格，希望每列下方的搜索栏仅对对应列内容进行搜索。测试后发现只有Num2列下方的最后一个搜索栏能正常工作，其余搜索栏均无响应。推测问题出在第二个for循环：当把循环次数从4改为3时，最后一个搜索栏失效，第三个则正常工作。尝试多种方法仍无法解决，恳请帮助。

原代码 #

JavaScript #

function search() {
    var inputRec,

        filterRec,

        table,
        tr,
        td,
        i,
        y,

        Rec;
    
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    for (i = 2; i <= tr.length; i++)
    {
        
        for (y = 0; y < 4; y++) {
            
            inputRec = document.getElementById("REC_"+y);

            filterRec = inputRec.value.toUpperCase();

            td =  tr[i].getElementsByTagName("td")[y];
            
            if (td) {

                Rec = (td.textContent  || td.innerText).toUpperCase();
                
                if (
                    Rec.indexOf(filterRec) > -1 
                ) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
    
}

CSS #

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: center;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}

HTML #

<table id="myTable">
  <tr class="header">
    <th style="width:25%;" id="columnName">Name</th>
    <th style="width:25%;" id="columnCountry">Country</th>
    <th style="width:25%;" id="columnName">Num1</th>
    <th style="width:25%;" id="columnCountry">Num2</th>
    
  </tr>
  <tr>
    <td> <input type="text" id="REC_0" onkeyup="search()"> </td>
    <td> <input type="text" id="REC_1" onkeyup="search()"> </td>
    <td> <input type="text" id="REC_2" onkeyup="search()"> </td>
    <td> <input type="text" id="REC_3" onkeyup="search()"> </td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
    <td>546</td>
    <td>547</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
    <td>456</td>
    <td>458</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
    <td>564</td>
    <td>258</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
    <td>648</td>
    <td>879</td>
  </tr>
  <tr>
    <td>Alexis</td>
    <td>Germany</td>
    <td>984</td>
    <td>365</td>
  </tr>

</table>

问题原因 #

核心问题是内层循环会覆盖之前的行显示状态。比如先检查第0列的搜索条件，符合就显示行；接着检查第1列，若不符合又会把行隐藏。最终只有最后一列（y=3）的判断会决定行的显示状态，所以只有最后一个搜索栏有效。

修复方案 #

修改逻辑：对每一行默认先标记为显示，然后检查所有列的搜索条件，只要有一列不符合，就标记为隐藏。这样所有列的搜索条件都会生效，实现多列联合过滤。

修复后的JavaScript代码：

function search() {
    var inputRec,
        filterRec,
        table,
        tr,
        td,
        i,
        y,
        Rec,
        shouldShow; // 标记当前行是否需要显示
    
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    // 遍历所有数据行（跳过表头和搜索栏行）
    for (i = 2; i < tr.length; i++) {
        shouldShow = true;
        
        // 检查每一列的搜索条件
        for (y = 0; y < 4; y++) {
            inputRec = document.getElementById("REC_" + y);
            filterRec = inputRec.value.toUpperCase();
            td = tr[i].getElementsByTagName("td")[y];
            
            if (td) {
                Rec = (td.textContent || td.innerText).toUpperCase();
                // 只要有一列不符合搜索条件，标记为隐藏并终止当前行的检查
                if (Rec.indexOf(filterRec) === -1) {
                    shouldShow = false;
                    break;
                }
            }
        }
        
        // 根据标记设置行的显示状态
        tr[i].style.display = shouldShow ? "" : "none";
    }
}

内容的提问来源于stack exchange，提问作者Riu