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

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

下面的代码段应该适合你。如果在顶部输入的日期无效，则将完全忽略它们。请注意，由于我们正在input事件上运行，您暂时会过滤掉所有行，因为它将在填写为4位数之前解释。您可能希望以不同方式对此进行说明，或者可能使用blur事件。

＆＃13;

$(".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;
}

＆＃13;

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

＆＃13;

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

1 个答案: