时间戳

首页 > 解决方案 > 如何在两天之间显示表格行？

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

问题描述

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

<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    |

标签： javascriptphphtml

解决方案

当您的数据从服务器获取时，您应该首先通过 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>

推荐阅读