Таблица фильтров JQuery для полей ввода Start и End Date

Question

У меня есть таблица. Эта таблица содержит строки, и один из этих столбцов в каждой строке является датой. Есть два входных текстовых поля над таблицей; один поле ввода представляет собой дату, а другой представляет собой дату. Предположим, что пользователь входит только с даты, я бы хотел, чтобы таблица отображала каждую строку, содержащую эту дату и после. Противоположно, если пользователь вводит только дату в поле ввода TO; он будет показывать все строки с датами, предшествующими этой дате. Наряду с тем, что пользователь имеет дату FROM AND TO. Он будет улавливать даты с датой FROM и датой даты вместе с каждой строкой, содержащей дату, которая находится между ними.

До сих пор я доработал поле ввода, которое будет искать весь корпус таблицы и выводить эту строку для символов, введенных пользователем.

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

Одной большой проблемой с вашим текущим кодом был дубликат id s 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>