javascript - 如何显示两天之间的表格行？

Question

我有一张 table 。我只想显示两天之间匹配的表格行

<table id ="Table">
 <thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
 </thead>
  <tbody>
       <tr>
            <td> 20-06-2019</td>
            <td> Payment </td>     
            <td >ajay </td>
            <td>By cash</td>  
        </tr>
        <tr> 
            <td>21-06-2019</td>
            <td> Payment </td>     
            <td>ajay</td>
            <td>By Cash</td>
        </tr>
         <tr>

            <td>22-06-2019</td>
            <td>Payment </td>     
            <td>ajay </td>
            <td>Tran</td>
        </tr>
          <tr>
            <td>23-06-2019</td>
            <td> Payment </td>     
            <td class="table_account capitalize">ajay </td>
            <td>By cash</td>
        </tr>
</tbody>
   </table>        

我想显示日期 20-6-2019 到 22-6-2019 之间的行。

 20-6-2019 |Payment | Ajay | By cash| 
 21-6-2019 |Payment | Ajay |By cash |
 22-6-2019 |Payment | Ajay |Tran    |

Answer 1

由于您的数据是从服务器获取的，因此您应该先通过 css 隐藏表格。然后获取数据并作为参数发送到 javascript 函数，我使用 displayInterval 进行测试，如下所示

function displayInterval(from, to) {
  $("#Table tbody tr td:first-child").each(function() {
    var curDate = setJsDate($(this).html());
    var froms =setJsDate(from);
    var tos = setJsDate(to);
    if(curDate >= froms && curDate <= tos) {     
    } else {
      $(this).parent().hide();
    }
  });
  $("#Table tbody").show();
}
function setJsDate(d) {
 if(typeof d == "number" || typeof d == "undefined") return;
   var pattern = d.split('-');
   var dt = new Date(pattern[2]+"-"+pattern[1] + "-"+pattern[0]);
   return dt.getTime();
}
displayInterval('20-06-2019','22-06-2019');

#Table tbody {
display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id ="Table">
 <thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
 </thead>
  <tbody>
       <tr>
            <td>20-06-2019</td>
            <td> Payment </td>     
            <td >ajay </td>
            <td>By cash</td>  
        </tr>
        <tr> 
            <td>21-06-2019</td>
            <td> Payment </td>     
            <td>ajay</td>
            <td>By Cash</td>
        </tr>
         <tr>

            <td>22-06-2019</td>
            <td>Payment </td>     
            <td>ajay </td>
            <td>Tran</td>
        </tr>
          <tr>
            <td>23-06-2019</td>
            <td> Payment </td>     
            <td class="table_account capitalize">ajay </td>
            <td>By cash</td>
        </tr>
</tbody>
   </table>