如何過濾開始日期和結束日期的數據日期，如果我有表格數據？

Question

如何過濾開始日期和結束日期的數據日期，如果我有表格數據？

使用jQuery和JavaScript我有一些數據，我想篩選此表中的IM數據搜索到谷歌，但沒有找到任何解決方案，請幫助我

嗨IM現在我的代碼是這樣

$(document).ready(function(){ 
 
         
 
         $('#submitAction').on('click', function(){ 
 
          
 
          var startDate = $('#startDate').val(); 
 
          var endDate = $('#endDate').val(); 
 
          alert("My Value is "+ startDate + endDate); 
 
          if((startDate == null || startDate == '') && (endDate == null || endDate == '')){ 
 
          alert("Please fill the correct start and end date"); 
 
         }else{ 
 
          alert("Success" +startDate + endDate); 
 
         } 
 
           
 
          return false; 
 
          
 
         
 
         }); 
 
     
 
     
 
});

body{ 
 
         font-family: arial; 
 
         font-size: 14px; 
 
         color:#000000; 
 
        } 
 
         .table-bordered { 
 
          border: 1px solid #ddd; 
 
          width: 800px; 
 
          background-color: transparent; 
 
          border-spacing: 0; 
 
          border-collapse: collapse; 
 
          font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
 
          font-size: 14px; 
 
          margin: 0 auto; 
 
         } 
 
         .table-bordered>thead>tr>th { 
 
          border-bottom-width: 2px; 
 
          vertical-align: bottom; 
 
          border-bottom: 2px solid #ddd; 
 
          padding: 8px; 
 
          text-align: left; 
 
         } 
 
         .table-bordered>tbody>tr>td{ 
 
          padding: 8px; 
 
          vertical-align: top; 
 
          border: 1px solid #ddd; 
 
         } 
 
        .dataFilter{ 
 
         display: block; 
 
         width: 800px; 
 
         margin: 20px auto; 
 
        } 
 
        
 
        .inputGroup label, 
 
        .inputGroup input{ 
 
         display: inline-block; 
 
         vertical-align: top; 
 
        } 
 
        .inputGroup + .inputGroup{ 
 
         margin-top: 10px; 
 
        } 
 
        .inputGroup label{ 
 
         width: 150px; 
 
        } 
 
        .inputGroup input{ 
 
          font-family: arial; 
 
          font-size: 14px; 
 
          line-height: 30px; 
 
          display: inline-block; 
 
          vertical-align: top; 
 
          width: 263px; 
 
          padding: 0; 
 
          padding-left: 10px; 
 
          margin: 0; 
 
          height: 28px; 
 

 
          border: 1px solid #ccc; 
 
          border-radius: 4px; 
 
          color: #a9abaa; 
 
          outline: 0; 
 
        } 
 
        .dataFilter button{ 
 
          border-radius: 5px; 
 
          font-size: 12px; 
 
          font-weight: 200; 
 
          height: 25px; 
 
          width: 70px; 
 
          border: 0; 
 
          outline: 0; 
 
          cursor: pointer; 
 
          background-color: #ccc; 
 
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form class="dataFilter" action="#" method="post" name=""> 
 
        <div class="inputGroup"> 
 
         <label for="startDate">Start Date</label> 
 
         <input type="text" value="" name="startDate" id="startDate" /> 
 
        </div> 
 
        <div class="inputGroup"> 
 
         <label for="endDate">End Date</label> 
 
         <input type="text" value="" name="endDate" id="endDate" /> 
 
        </div> 
 
        <button id="submitAction">Submit</button> 
 
       </form> 
 
\t \t \t  <table cellpadding="0" cellspacing="0" border="0" class="table-bordered"> 
 
\t \t \t   <thead> 
 
\t \t \t    <th>S.no</th> 
 
\t \t \t    <th>Name</th> 
 
\t \t \t    <th>Email ID</th> 
 
\t \t \t    <th>Mobile No</th> 
 
\t \t \t    <th>Date</th> 
 
\t \t \t   </thead> 
 
\t \t \t   <tbody id="userData"> 
 
         <tr> 
 
          <td>1</td> 
 
          <td>Rohit</td> 
 
          <td>sachin.raghaddv@xynmz.in</td> 
 
          <td>9654798949</td> 
 
          <td>2015-07-21</td> 
 
         </tr> 
 
         <tr> 
 
          <td>1</td> 
 
          <td>Rohit</td> 
 
          <td>sachin.raghaddv@xynmz.in</td> 
 
          <td>9654798949</td> 
 
          <td>2015-07-08</td> 
 
         </tr> 
 
         <tr> 
 
          <td>1</td> 
 
          <td>Rohit</td> 
 
          <td>sachin.raghaddv@xynmz.in</td> 
 
          <td>9654798949</td> 
 
          <td>2015-07-15</td> 
 
         </tr> 
 
         <tr> 
 
          <td>1</td> 
 
          <td>Rohit</td> 
 
          <td>sachin.raghaddv@xynmz.in</td> 
 
          <td>9654798949</td> 
 
          <td>2015-07-21</td> 
 
         </tr> 
 
         <tr> 
 
          <td>1</td> 
 
          <td>Rohit</td> 
 
          <td>sachin.raghaddv@xynmz.in</td> 
 
          <td>9654798949</td> 
 
          <td>2015-07-09</td> 
 
         </tr> 
 
         <tr> 
 
          <td>1</td> 
 
          <td>Rohit</td> 
 
          <td>sachin.raghaddv@xynmz.in</td> 
 
          <td>9654798949</td> 
 
          <td>2015-07-12</td> 
 
         </tr> 
 
         <tr> 
 
          <td>1</td> 
 
          <td>Rohit</td> 
 
          <td>sachin.raghaddv@xynmz.in</td> 
 
          <td>9654798949</td> 
 
          <td>2015-06-22</td> 
 
         </tr> 
 
\t \t \t   </tbody> 
 
\t \t \t  </table>

Answer 1

什麼是這樣的：

$(document).ready(function() { 

    var tableDateCellIndex = 4; 

    $('#submitAction').on('click', function (evt) { 

    var startDate = parseDate($('#startDate').val()); 
    var endDate = parseDate($('#endDate').val()); 


    if (isNaN(startDate.getDate()) || isNaN(endDate.getDate())) { 
     alert("Please fill the correct start and end date"); 
    } else { 

     var rows = $("#userData").find("tr"); 

     $.each(rows, function (index, row) { 
     var rowDate = parseDate($($(row).find("td")[tableDateCellIndex]).text()); 

     if (rowDate < startDate || rowDate > endDate) { 
      // could take an action other than hiding the row with the date outside of the specified range 
      $(row).hide(); 
     } 

     }); 

    } 

    return false; 

    }); 

    // parse a date in yyyy-mm-dd format 
    function parseDate(input) { 
    var parts = input.split('-'); 
    // new Date(year, month [, day [, hours[, minutes[, seconds[, ms]]]]]) 
    return new Date(parts[0], parts[1] - 1, parts[2]); 
    } 


});