Javascript 开始和结束日期输入字段的JQuery筛选表

我有一张桌子。此表包含行，每行中有一列是日期。表格上方有两个输入文本框；一个输入框表示起始日期，另一个表示截止日期。假设用户只输入起始日期，我希望表显示包含该日期及其后的每一行。如果用户只在TO输入字段中输入日期，则情况正好相反；它将显示所有日期在该日期之前的行。以及用户是否具有起始日期和截止日期。它将捕获具有FROM date和TO date的日期，以及包含介于两者之间的日期的每一行

到目前为止，我完成的是一个输入字段，它将搜索整个表体，并输出该行中用户输入的字符

JQuery

<script>
    $("#searchInput").keyup(function () {
    //split the current value of searchInput
    var data = this.value.split(" ");
    //create a jquery object of the rows
    var jo = $(".fbody").find("tr");
    if (this.value == "") {
        jo.show();
        return;
    }
    //hide all the rows
    jo.hide();

    //Recusively filter the jquery object to get results.
    jo.filter(function (i, v) {
        var $t = $(this);
        for (var d = 0; d < data.length; ++d) {
            if ($t.is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    })
    //show the rows that match.
    .show();
}).focus(function () {
    this.value = "";

    $(this).unbind('focus');
})

    </script>

$（“#searchInput”）.keyup（函数（）{
//拆分searchInput的当前值
var数据=此.value.split（“”）；
//创建行的jquery对象
var jo=$（“.fbody”）.find（“tr”）；
如果（this.value==“”）{
jo.show（）；
返回；
}
//隐藏所有行
jo.hide（）；
//循环过滤jquery对象以获得结果。
jo.filter（函数（i，v）{
var$t=$（本）；
对于（变量d=0；d

HTML

某物
某物
4/18/2016
某物
某物
某物
4/19/2016
某物
某物
某物
4/20/2016
某物

---

请帮忙。谢谢。

当前代码的一个大问题是重复的

id

s DOM。你剩下的逻辑很接近，但我简化了

下面的代码片段应该适合您。如果在顶部输入的日期无效，则将完全忽略这些日期。请注意，由于我们正在运行

input

事件，因此您将暂时过滤掉所有行，因为它将解释在填充到4位之前的几年。您可能希望以不同的方式对此进行解释，或者可能改用

blur

事件

$（.searchInput”）.on（“输入”，函数（）{
var from=stringToDate（$（“#searchFrom”）.val（）；
var to=stringToDate（$（“#searchTo”）.val（）；
$（“.fbody tr”）。每个（函数（）{
var行=$（此）；
var date=stringToDate（row.find（“td”）.eq（2.text（））；
//默认情况下显示所有行
var show=true；
//如果起始日期有效且行日期小于起始日期，则隐藏该行
如果（从&&date<从）
show=false；
//如果“截止日期”有效且行日期大于“截止日期”，则隐藏该行
如果（到&&date>to）
show=false；
如果（显示）
row.show（）；
其他的
row.hide（）；
});
});
//解析输入的日期。如果无效，则返回NaN
函数stringToDate（s）{
var-ret=NaN；
var parts=s.split（“/”）；
日期=新日期（第[2]部分、第[0]部分、第[1]部分）；
如果（！isNaN（date.getTime（）））{
ret=日期；
}
返回ret；
}

没有什么
没有什么
4/18/2016
没有什么
没有什么
没有什么
4/19/2016
没有什么
没有什么
没有什么
4/20/2016
没有什么

当前代码的一个大问题是重复的

id

s DOM。你剩下的逻辑很接近，但我简化了

下面的代码片段应该适合您。如果在顶部输入的日期无效，则将完全忽略这些日期。请注意，由于我们正在运行

input

事件，因此您将暂时过滤掉所有行，因为它将解释在填充到4位之前的几年。您可能希望以不同的方式对此进行解释，或者可能改用

blur

事件

$（.searchInput”）.on（“输入”，函数（）{
var from=stringToDate（$（“#searchFrom”）.val（）；
var to=stringToDate（$（“#searchTo”）.val（）；
$（“.fbody tr”）。每个（函数（）{
var行=$（此）；
var date=stringToDate（row.find（“td”）.eq（2.text（））；
//默认情况下显示所有行
var show=true；
//如果起始日期有效且行日期小于起始日期，则隐藏该行
如果（从&&date<从）
show=false；
//如果“截止日期”有效且行日期大于“截止日期”，则隐藏该行
如果（到&&date>to）
show=false；
如果（显示）
row.show（）；
其他的
row.hide（）；
});
});
//解析输入的日期。如果无效，则返回NaN
函数stringToDate（s）{
var-ret=NaN；
var parts=s.split（“/”）；
日期=新日期（第[2]部分、第[0]部分、第[1]部分）；
如果（！isNaN（date.getTime（）））{
ret=日期；
}
返回ret；
}

没有什么
没有什么
4/18/2016
没有什么
没有什么
没有什么
4/19/2016
没有什么
没有什么
没有什么
4/20/2016
没有什么

太棒了！谢谢你的帮助！如果我使用模糊事件，那么如果用户在输入字段之外单击，它就会工作。在输入字段中键入日期时，您知道可能会填充表格的任何其他选项吗？

input

可能是您最好的选项

          <input id="searchInput" type="text" placeholder="From"/>
          <input id="searchInput" type="text" placeholder="To" >
          <tbody class="fbody">
                            <tr>
                               <td>something</td>
                                <td>something</td>
                                <td>4/18/2016</td>
                                <td>something</td>
                            </tr>
                            <tr>
                               <td>something</td>
                                <td>something</td>
                                <td>4/19/2016</td>
                                <td>something</td>
                            </tr>
                             <tr>
                               <td>something</td>
                                <td>something</td>
                                <td>4/20/2016</td>
                                <td>something</td>
                            </tr>
                       </tbody>