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添加一个类，然后执行以下操作：

oTable.bindAggregation("items", "/rows", function(index, context) {
                    var roa = XLSX.utils.sheet_to_json(worksheet);

                    if(roa.length > 0){

                        result[worksheet] = roa;

                    }
                    for(var i = 0; i < roa.length; i++){

                        return new sap.m.ColumnListItem({
                            cells: [
                                new Text({ text :context.getObject().cellId })
                                ]
                        })
                    };
                });

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（$（“ expired”）））;   }，function（）{$（this）.find（“ span：last”）.remove（）; }）;

$（“ tr.fade”）.hover（function（）{$（this）.fadeOut（100）; $（   这个）.fadeIn（500）; }）;

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

3 个答案: