在html表格的两个输入日期之间过滤-Java脚本

Question

我正在尝试通过输入两个日期（从和到）对html表进行过滤，然后它应相应地过滤html表column [0]“日期列”中的数据。

我页面上的输入：:

<input type="date" id="date-start" onselect="searchDate()" />

<input type="date" id="date-stop" onselect="searchDate()" />

到目前为止我在一起使用的Java脚本是：

    function searchDate() {
        var input_startDate, input_stopDate, table, tr, i;
        input_startDate = document.getElementById("date-start");
        input_stopDate = document.getElementById("date-stop");
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td_date = tr[i].getElementsByTagName("td")[0];

            if (td_date) {

                if (td_date >= input_startDate && td_name <= input_stopDate) {
                    ??? - Display Rows;
                }
                else {
                    ??? - Hide Rows;
                }
            }
        }
    }

我知道这可能很简单，但是我不知道该怎么办，因为我似乎无法使其正常工作。

我的表创建如下：

        @if (employees is null)
    {
        <p style="color:white;"><em>Loading . . .</em></p>
    }
    else
    {
        <table class="table" id="myTable">
            <thead>
                <tr>
                    <th style="border: none;">Entry Date</th>
                    <th style="border: none;">Employee</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var employee in employees)
                {
                    <tr>
                        <td style="vertical-align: middle; border: none;">@employee.EntryDate</td>
                        <td style="vertical-align: middle; border: none;">@employee.POI</td>
                    </tr>
                }
            </tbody>
        </table>
    }

任何帮助将不胜感激。

数据库格式为：2020-06-05 10:57:10

谢谢。

Answer 1

您可以使用style.display隐藏/显示您的行。将其设置为“无”以隐藏行，或将其设置为“阻止”以查看它们。

function searchDate() {
    var input_startDate, input_stopDate, table, tr, i;
    input_startDate = document.getElementById("date-start");
    input_stopDate = document.getElementById("date-stop");
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td_date = tr[i].getElementsByTagName("td")[0];

        if (td_date) {

            if (td_date >= input_startDate && td_name <= input_stopDate) {
                tr[i].style.display = "block";
            }
            else {
                tr[i].style.display = "none";
            }
        }
    }
}

Answer 2

示例中有多个问题：

1. 您没有从表td单元格获得实际值，或者输入
2. 您需要将值转换为日期以进行比较正确
3. 然后您可以通过设置显示来隐藏/显示一行样式上的属性

请参见下面的评论演示：

function searchDate() {
        var input_startDate, input_stopDate, table, tr, i;
        
        // get the values and convert to date
        input_startDate = new Date(document.getElementById("date-start").value); 
        input_stopDate = new Date(document.getElementById("date-stop").value);
        
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        
        for (i = 0; i < tr.length; i++) {
        // you need to get the text and convert to date
            let td_date = new Date(tr[i].getElementsByTagName("td")[0].textContent);

            // now you can compare dates correctly
            if (td_date) {
                if (td_date >= input_startDate && td_date <= input_stopDate) {
                 // show the row by setting the display property
                  tr[i].style.display = 'block';
                }
                else {
                    // hide the row by setting the display property
                    tr[i].style.display = 'none';
                }
            }
            
        }
    }

<input id="date-start" type="text" value="2020-01-01"></input>
<input id="date-stop" type="text" value="2020-01-02"></input>
<button type="button" onclick="searchDate()">Go</button>
<hr/>
<table id="myTable">
  <tr>
    <td>2020-01-01</td>
  </tr>
  <tr>
    <td>2020-01-02</td>
  </tr>
  <tr>
    <td>2020-01-03</td>
  </tr>
</table>