開始日期和結束日期輸入字段的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>