Hide table row based on table cell pure Javascript

I have an form which add the input to an HTML table. I want to do a dropdown where the user can filter for specific table cell elements only in pure Javascript and a filter method.

Let’s say I have an table like this:

Name | Age | ID

Anna | 14 | 3

Herb | 34 | 4

John | 14 | 6

And a dropdown like this:

Select Name

• Anna
• Herb
• John

In the case the user selects Anna only the following table should showed:

Name | Age | ID

Anna | 14 | 3

The tricky part is that every row is created through the input from an form what means that I can’t talk to an specific table row per id or class.

Here is what I tried:

Table

<table id="table" class="tableZebra" border="1">
    <tr>
        <th>Student_Id</th>
        <th>First_Name</th>
        <th>Last_Name</th>
        <th>DOB</th>
        <th>Gender</th>
        <th>Department</th>
        <th>Email_Id</th>
        <th>Joining Date</th>
    </tr>
</table>                           

Form

<form">
    <p>*Staff_Id:</p>
    <div><input type="text" id="Staff_Id" placeholder="Staff_Id"></div>
    <p>*First_Name:</p>
    <div><input type="text" id="First_Name_staff" placeholder="First_Name"></div>
    <p>Last_Name:</p>
    <div><input type="text" id="Last_Name_staff" placeholder="Last_Name"></div>
    <p>DOB:</p>
    <div><input type="text" id="DOB_staff" placeholder="DOB"></div>
    <p>Gender:</p>
    <div><input type="radio" id="GenderFemale_staff" placeholder="Gender" name="test"></div>
    <label for="html">Female</label>
    <div><input type="radio" id="GenderMale_staff" placeholder="Gender" name="test"></div>
    <label for="html">Male</label>
    <p>*Email_Id:</p>
    <div><input type="text" id="Email_Id_staff" placeholder="Email_Id"></div>
    <div class="distance-submit"><input class="submit" type="submit" value="Submit" onclick="onClickCheckFormStaff()"></div>
    <div class="error-staff" id="error-staff">*Fill out all mandatory fields</div>
</form>

Select button

<p>*Department:</p>
<select name="departments" id="Departments">
    <option value="empty">------</option>
    <option value="Department_1">Department_1</option>
    <option value="Department_2">Department_2</option>
    <option value="Department_3">Department_3</option>
    <option value="Department_4">Department_4</option>
</select>

JS

function changeDisplayTable(){
    //here i get all the values from the table cell departments in an array as text
    var dataCellsDepartments = document.getElementsByClassName(" dep"); //if does not work try " dep"
    var listWithTextContentDepartments = [];
    var i = 0;
    len = dataCellsDepartments.length;
    while(i < len){
        listWithTextContentDepartments.push(dataCellsDepartments[i].textContent)
        i++
    }
    console.log(listWithTextContentDepartments);
    //array filtern und dann durch jede row gehen und checken if row contains one of the elem from array
    const result = listWithTextContentDepartments.filter(checkDepartment);
    function checkDepartment(department){
        return department
    }

    //wenn selected elem != elem from table row --> hide table row

}

For the Javascript part I tried to get all the elements from the table cell which should contain the value from the select button and if this element is != the value from the select button I hide the table row. I don’t know how to get the table row through a table cell element.