JQuery Hover показать сообщение, если дата строки таблицы меньше, чем сегодня

Question

Мне нужно показать сообщение с именем expired рядом с заголовком каждой строки, если дата окончания меньше текущей даты.Это будет сделано с помощью hover в 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>

Iнужно получить дату окончания каждой строки и сравнить ее с сегодняшней датой.А если дата окончания меньше текущей, то рядом с заголовком должно быть показано сообщение.

Есть идеи по этому поводу?Я понятия не имею, как получить дату окончания каждой строки.

Answer 1

Вы можете добавить атрибут класса к <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 ($ ("expired"));}, function () {$ (this).find ("span: last") .remove ();});

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

Answer 2

Попробуйте подписаться

Просто добавьте endDate класс к дате окончания <td> При добавлении <table> body

$('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 3

Просто добавьте класс к тд, из которого вы хотите получить дату, и сделайте что-то вроде:

$('.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