开始和结束日期输入字段的 JQuery 过滤表

Question

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

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

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>

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>

请帮忙。谢谢。

Answer 1

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

下面的 sn-p 应该适合你。如果在顶部输入的日期无效，它们将被完全忽略。请注意，由于我们正在运行 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>