时间戳

首页 > 解决方案 > 如何修复未捕获的类型错误：无法读取属性“innerHTML”

javascript - 如何修复未捕获的类型错误：无法读取属性“innerHTML”

问题描述

我想在两个日期之间搜索数据，但一次又一次发生相同的错误从用户那里获取两个日期，然后从这些日期中搜索并再次显示数据按日期过滤数据

<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>

标签： javascripthtmldom

解决方案

使用 获得表格行的地方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];

推荐阅读