如果td中的日期早于今天的日期,如何隐藏表格行?

时间:2014-10-02 10:18:00

标签: javascript jquery html

作为编码的弗兰肯斯坦博士,我已经设法将一个表格作为示例[这里] [1],利用数据表和英国日期排序。这个难题的最后一部分是找到一种方法,如果相应行中的日期早于当前日期,则能够隐藏整行(即如果td元素中的日期早于今天的日期,则隐藏行包含该td元素。)

这个问题有解决方案吗?任何帮助非常感谢。

编辑:按要求编码:

<html>
<head>
<title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script>

    // UK Date Sorting
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a, b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');

var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a, b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');

var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};


$(document).ready(function() {

$("#table_id").dataTable({
    "aoColumnDefs" : [
{"aTargets" : [2] , "sType" : "uk_date"}
]

});
});
</script>
</head>
<body>
<div class="page-header">
<h2>Heading</h2>
</div>
<div class="table-responsive">
<table id="table_id" class="table table-striped table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Lecture name</th>
<th>Lecturer</th>
<th class="uk-date-column">date</th>
<th>time</th>
<th>link</th>
</tr>
</thead>
<tbody>
<TR>
<TD>Lecture 1</TD>
<TD>Lecturer 1</TD>
<TD>01/10/2014</TD>
<TD ALIGN="RIGHT">11:00</TD>
<TD>Link 1</TD>
</TR>
<TR>
<TD>Lecture 2</TD>
<TD>Lecturer 2</TD>
<TD>02/10/2014</TD>
<TD ALIGN="RIGHT">11:00</TD>
<TD>Link 2</TD>
</TR>
</tbody>
</table>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

给那个特定的td一些类说“clsdate”。然后指向该类并找到html并将其转换为日期。找出差异并做必要的

$('table').find(".clsdate").each(function(index,element){
  var tdDate=new Date($(element).html());
  var currDate=getDate();
  var diff=currDate-tdDate;
   if(diff<0)
   {
     $(element).parent('tr').css('display','none');
   }
});

答案 1 :(得分:0)

$(document).ready(function() {

    $("#table_id").dataTable({"aoColumnDefs" : [
      {"aTargets" : [2] , "sType" : "uk_date"}]});

  $('TD.date').each(function( index ) {  
    var q = new Date();
    var m = q.getMonth();
    var d = q.getDay();
    var y = q.getYear();

    var date = new Date(y,m,d);
    if(new Date($(this).text()) < date)    {

        $(this).parent().attr("style", "display: none")
    }
      });

});

并将日期类添加到包含日期的列。