Как исправить ошибку Uncaught Typeerror: невозможно прочитать свойство innerHTML

Question

Я хочу искать данные между датами буксировки, но снова и снова появляюсь одна и та же ошибка. Я пробовал несколько поисков и методов, но я застрял, я просто получаю сообщение об ошибке и не знаю, что делать, чтобы ее устранить Над таблицей есть кнопка поиска, которая получает две даты от пользователя, и по этим датам данные ищутся и снова отображаются в виде сортировки данных по датам

<button type="button" class="btn btn-info  " style="font-size:17px; margin-left:548px; margin-top:-63px;" onclick="myFunction()">Search</button>
     <table id="worksheet-list" class="table table-responsive">


                <thead >

                    <tr class="table table-primary">

                        <th>
                            @*@Html.Label("SNo")*@
                        </th>
                        <th>
                            @Html.Label("Project")
                        </th>


                        <th>
                            @*@Html.DisplayNameFor(model => model.Hours)*@
                            Hours
                        </th>
                        <th>
                            @*@Html.DisplayNameFor(model => model.Date)*@
                            Date
                        </th>

                        <th>Action</th>
                    </tr>
                </thead>

                @*@foreach (var item in Model)*@
                @for (int count = 0; count < 10; count++)

                {
                    //count++;
                    <tr>
                        <td>
                            @count
                        </td>

                        <td>
                            @*@Html.DisplayFor(modelItem => item.Project.Name)*@
                            ASP.NET
                        </td>


                        <td>
                            @*@Html.DisplayFor(modelItem => item.Hours)*@
                            5 Hours
                        </td>
                        <td>
                            @*@Html.DisplayFor(modelItem => item.Date)*@
                            6/8/2018
                        </td>

                        <td>

                            <a href="#" class="btn btn-primary">Edit</a>
                            @*<a href="#" class="btn btn-primary">Detail</a>*@
                            <a href="#" class="btn btn-danger">Delete</a>
                        </td>



                    </tr>
                }

            </table> 


<script>
 function myFunction() {
        var from = document.getElementById("date-from");
        var to = document.getElementById("date-to");
        var table = document.getElementById("worksheet-list");
        var tr = table.getElementsByTagName("tr");
        var td;
        for (var i = 0; i < tr.length; i++) {

            td = tr[i].getElementsByTagName("td")[3].innerHTML;

            var d1 = from.split("/");
            var d2 = to.split("/");
            var c = td.split("/");

            var from = new Date(d1[0], parseInt(d1[1]) - 1, d1[2]);
            var to = new Date(d2[0], parseInt(d2[1]) - 1, d2[2]);
            var check = new Date(c[0], parseInt(c[1]) - 1, c[2]);
            if (check >= from && check <= to) {

                tr[i].style.display = "";
            }
            else {

                tr[i].style.display = "none";
            }
        }
    }
 </script>

Answer 1

Где вы получаете строки таблицы с getElementsByTagName("tr"), вы также получите строку в элементе thead, который не имеет дочерних элементов td.

Самый простой способ решить вашу проблему - проигнорировать первую строку таблицы, начав цикл с 1 ...

for (var i = 1; i < tr.length; i++) {

Если бы вы захотели, вы могли бы проверить смысл кода ...

for (var i = 0; i < tr.length; i++) {

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

    // if this row has no 3rd td then continue the loop
    if (td.length < 4) continue;

    td = td[3];