Html table header does not appear anymore after executing Javascript

Hello, I have a table with two rows in the head and after the Javascript gets executed only the row with the filter appears but the other one(with the name for the headers) does not.  Most likely it is the Javascript that does not re-create that row but I do not know to make it do that.  Thank you

HTML

<table class="display table table-striped table-bordered" id="ITTasksTable">       
        <thead>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><input type="text" id="myInput" onkeyup="myFilterFunction()" placeholder="Filter status" title="Status to filter"></td>
            </tr>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.ITNumber)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITDescription)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITEnterDate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITAssignedTo)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITEstimatedCompletion)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITPriority)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITFrom)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITStatus)
                </th>
            </tr>
        </thead>
        <tbody class="tbody">
            @foreach (var item in Model)
         ........
        </tbody> 

Select allOpen in new window

JAVASCRIPT

<script>
        //STATUS COLUMN FILTER
        function myFilterFunction() {
            var input, filter, table, tr, td, cell, i, j;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("ITTasksTable");
            tr = table.getElementsByTagName("tr");
            for (i = 1; i < tr.length; i++) {
                // Hide the row initially.
                tr[i].style.display = "none";

                td = tr[i].getElementsByTagName("td");
                for (var j = 0; j < td.length; j++) {

                    cell = tr[i].getElementsByTagName("td")[7];
                    if (cell) {
                        if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                            break;
                        }
                    }
                }
            }
        }
    </script>

Select allOpen in new window