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

Question

我有一个表。该表包含行，每行中的其中一列是日期。表格上方有两个输入文本框;一个输入框表示起始日期，另一个表示迄今为止。假设用户只输入起始日期，我希望表格显示包含该日期和之后的每一行。如果用户只在TO输入字段中输入日期，则相反;它会显示日期到达该日期的所有行。以及用户是否有FROM和TO日期。它将捕获FROM日期和TO日期以及包含这两者之间的日期的每一行。

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

JQuery的

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

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

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