How to make a search bar for every column in a table?-CodePudding

so i'm trying to create a table with multiple search bar below each column that each search in their specific column, if you test my code now you will see that only the last search bar wich is below "Num2" actually search correctly, all the other one dont do anything. I think the problem come from my second for loop because when you change this loop from 4 to 3, the last search bar dont work anymore and the 3rd one is now working fine wich is logic when you think about it. I've thought about it a lot but I can't find a solution. Thanks for your help.

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";
                }
            }
        }
    }
    
}

#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;
}

<table id="myTable">
  <tr >
    <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>

CodePudding user response：

The problem is that the loop is overwriting style.display for every column.

So all columns will get style.display = "" even if the country column should filter on "Sweden". This happens because in the last iteration of the loop the last column will check if any row matches the empty string "" which all columns match and then sets style.display = "".

Here is a working example where I have added the variable anySearchDoesNotMatch which defaults to false. Then if any of the columns have searched for more than an empty string and the string does not exist in the row -> set anySearchDoesNotMatch to true. And hide that row.

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  )
    {
        let anySearchDoesNotMatch = false; 
        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 != "" && Rec.indexOf(filterRec) == -1 
                ) {
                    anySearchDoesNotMatch = true;
                }
            }
        }
        if (anySearchDoesNotMatch) {
            tr[i].style.display = "none";
        } else {
            tr[i].style.display = "";
        }
    }
    
}

#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;
}

<table id="myTable">
  <tr >
    <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>