如果表格行日期小于今天，jquery悬停显示消息

Question

如果结束日期小于今天的日期，我需要在每行的标题附近显示一条名为 expired 的消息。这将在 jquery 中使用悬停来完成。

我的表格视图如下：

                     <div class="table-responsive">
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col">Title</th>
                              <th scope="col">Start Date</th>
                              <th scope="col">End Date</th>
                              <th scope="col">Description</th>
                              <th scope="col">Edit</th>
                            </tr>
                          </thead>
                          <tbody>
                            <?php foreach($offerList as $info){ ?>
                            <tr>
                                <td><a href="<?php echo base_url()."offer/publicview/?id=".urlencode($this->encrypt->encode($info->offid)); ?>"><?php echo $info->title; ?></a></td>
                                <td><?php echo $info->startdate; ?></td>
                                <td><?php echo $info->enddate; ?></td>
                                <td><?php echo $info->discrip; ?></td>
                                <td>
                                    <a href="<?php echo base_url()."offer/edit/?id=".urlencode($this->encrypt->encode($info->offid)); ?>">Edit</a>                    

                                </td>
                            </tr>
                            <?php } ?>
                          </tbody>
                        </table>
                        </div>

jquery：

<script>


var today = t.getDate() + '/' + (t.getMonth()+1) + '/' + t.getFullYear() ;

$( "tr" ).hover(

  function() {  
   $( this ).append( $( "<span> expired </span>" ) );    
  }, function() {
   $( this ).find( "span:last" ).remove();
  });

 $( "tr.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
 });

</script>

我需要获取每一行的结束日期并将其与今天的日期进行比较。如果结束日期小于今天的日期，则消息应显示在标题附近。

对此有什么想法吗？我不知道如何获取每行的结束日期。

Answer 1

尝试关注

只需将endDate 类添加到结束日期<td> 同时附加<table> 正文

$('tr:not(:first)').hover(function(){
	var trDate=$(this).find('.endDate')
 	 var d = new Date();
	var month = d.getMonth()+1;
	var day = d.getDate();
	var CurrentDate =(day<10 ? '0' : '') + day  + '-' +
    (month<10 ? '0' : '') + month + '-' +d.getFullYear();
    
    if(CurrentDate > $(trDate).text())
    {
   		alert('expired');
	}
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
                        <table class="table" border="1">
                          <thead>
                            <tr>
                              <th scope="col">Title</th>
                              <th scope="col">Start Date</th>
                              <th scope="col">End Date</th>
                              <th scope="col">Description</th>
                              <th scope="col">Edit</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                                <td>Test</td>
                                <td>05-09-2018</td>
                                <td class="endDate">19-09-2018</td>
                                <td>Testing Hover</td>
                                <td>Edit</td>
                            </tr>
                             <tr>
                                <td>Ended date</td>
                                <td>09-09-2018</td>
                                <td class="endDate">18-09-2018</td>
                                <td>Testing Hover</td>
                                <td>Edit</td>
                            </tr>
                             <tr>
                                <td>Date</td>
                                <td>12-09-2018</td>
                                <td class="endDate">22-09-2018</td>
                                <td>Testing Hover</td>
                                <td>Edit</td>
                            </tr>
                             <tr>
                                <td>Date Ended</td>
                                <td>12-09-2018</td>
                                <td class="endDate">01-09-2018</td>
                                <td>Testing Hover</td>
                                <td>Edit</td>
                            </tr>
                          </tbody>
                        </table>
                        </div>

Answer 2

只需向要从中获取日期的 td 添加一个类，然后执行以下操作：

$('.hov').hover(function(){
    var el_value = $(this).text(); // date
    var enddate = new Date(el_value).getTime();
    var today = new Date().setHours(0,0,0,0);
    if (enddate < today) {
        console.log('expired');
    } else {
        console.log('not expired');
    }
});

http://jsfiddle.net/vbjwe43m/4/

用途：Check if date is in the past Javascript

Answer 3

您可以向<td><?php echo $info->enddate; ?></td> 添加一个类属性，使其看起来像<td class='enddate'><?php echo $info->enddate; ?></td>。然后在您的 jquery 中，您将通过

获得结束日期

$("tr").hover(

//这是结束日期
var $enddate = $(this).find('.enddate').text();

function() { $( this ).append( $( "过期" ) ); }, function() { $( this ).find( "span:last" ).remove(); });

$( "tr.fade" ).hover(function() { $( this ).fadeOut( 100 ); $( 这 ).fadeIn( 500 ); });