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

Question

如果结束日期小于今天的日期，我需要在每行标题附近显示一条名为"过期"的消息。这将在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/

用途：检查日期是否在过去 Javascript

Answer 3

您可以将类属性添加到<td><?php echo $info->enddate; ?></td>，使其看起来像<td class='enddate'><?php echo $info->enddate; ?></td>。然后在你的jquery中，你将通过以下方式获得结束日期

$( "tr" (.hover(

//this is enddate var $enddate = $(this(.find('.enddate
'(.text((;

function(( { $( this (.append( $( " expire "( (; }， function(( { $( this (.find( "span：last" (.remove((; });

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