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

JQuery Filter Table for Start and End Date input fields

本文关键字：日期 JQuery 筛选 字段 结束 输入 开始      更新时间：2023-09-26

我有一张桌子。此表包含行，每行中的一列是日期。表格上方有两个输入文本框;一个输入框表示"开始日期"，另一个输入框表示"结束日期"。假设用户只输入开始日期，我希望表格显示包含该日期及之后的每一行。如果用户只在 TO 输入字段中输入日期，则相反;它将显示日期早于该日期的所有行。以及用户是否有开始和结束日期。它将捕获带有 FROM 日期和 TO 日期的日期，以及包含介于两者之间的日期的每一行。

到目前为止，我完成的是一个输入字段，它将搜索表格的整个主体，并输出该行以获取用户输入的任何字符。

杰奎里 

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

.HTML 

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

请帮忙。谢谢。

您当前代码的一个大问题是 DOM id重复。你的逻辑的其余部分很接近，但我简化了它。

下面的代码段应该适合您。如果在顶部输入的日期无效，它们将被完全忽略。请注意，由于我们是在 input 事件上运行的，因此您将暂时筛选出所有行，因为它将在它们填充到 4 位数字之前解释几年。您可能希望以不同的方式对此进行说明，或者可能改用 blur 事件。

$(".searchInput").on("input", function() {
  var from = stringToDate($("#searchFrom").val());
  var to = stringToDate($("#searchTo").val());
  $(".fbody tr").each(function() {
    var row = $(this);
    var date = stringToDate(row.find("td").eq(2).text());
    
    //show all rows by default
    var show = true;
    //if from date is valid and row date is less than from date, hide the row
    if (from && date < from)
      show = false;
    
    //if to date is valid and row date is greater than to date, hide the row
    if (to && date > to)
      show = false;
    if (show)
      row.show();
    else
      row.hide();
  });
});
//parse entered date. return NaN if invalid
function stringToDate(s) {
  var ret = NaN;
  var parts = s.split("/");
  date = new Date(parts[2], parts[0], parts[1]);
  if (!isNaN(date.getTime())) {
    ret = date;
  }
  return ret;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="searchFrom" class="searchInput" type="text" placeholder="From"/>
<input id="searchTo" class="searchInput" type="text" placeholder="To" >
<table class="fbody" border="1">
  <tr>
    <td>nothing</td>
    <td>nothing</td>
    <td>4/18/2016</td>
    <td>nothing</td>
  </tr>
  <tr>
    <td>nothing</td>
    <td>nothing</td>
    <td>4/19/2016</td>
    <td>nothing</td>
  </tr>
  <tr>
    <td>nothing</td>
    <td>nothing</td>
    <td>4/20/2016</td>
    <td>nothing</td>
  </tr>
</table>

相关文章：