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

如何修复未捕获的Typeerror：无法读取属性“ innerHTML”

1 个答案: