Masquer la ligne du tableau après la date dans la colonne

Je souhaite me débarrasser de WordPress et publier une belle page Web statique via Amazon S3 et Cloudfront. La seule partie «dynamic» du site Web que j’ai maintenant (avec wordpress) est une liste de dates de tournées. Les événements passés ne sont pas affichés.

J’aime cette fonctionnalité, mais je pense qu’il doit y avoir un moyen de faire cela en utilisant HTML et jQuery. Malheureusement, je ne connais rien à ce dernier et j’espérais vraiment que quelqu’un ici m’aide à trouver la solution.

Comment masquer une ligne de table si la date dans td est antérieure à la date d’aujourd’hui? << Celui-là je ne pouvais pas me rendre au travail, surtout parce qu'il y a beaucoup d'autres fonctions incluses dont je n'ai pas besoin.

Ce dont j’ai besoin est un tableau, avec quelques lignes, chaque ligne ayant une cellule contenant une date (format de date européen JJ-MM-AA). Dès que la date est passée, je voudrais que la ligne soit cachée.

  Date  Other stuff  Some more stuff  
  15-05-2015  Bla Bla Bla  Some more bla  
  11-07-2035  Bla Bla Bla 2  Some more bla 2

Date	Other stuff	Some more stuff
15-05-2015	Bla Bla Bla	Some more bla
11-07-2035	Bla Bla Bla 2	Some more bla 2

Ainsi, dans ce cas, la première ligne avec le contenu serait masquée, car elle appartient au passé, et la seconde, visible dans un avenir lointain. Espérons qu’il existe une solution facile pour cela!

Tout d’abord, vous devez créer une fonction pour comparer les dates:

  function compareDate(dateParam) { var CurrentDate = new Date(); var arrDate = dateParam.split("-"); var SelectedDate = new Date( arrDate [2], arrDate [1] - 1, arrDate [0] ); if(CurrentDate > SelectedDate){ return true; //<-- means current date is greater } else { return false; //<-- means current date is smaller or equal } }

Ensuite, vérifiez chaque TR sauf pour l'en-tête un:

 $(function(){ $('tr').not(':first').each(function(){ //<-- take all rows except header if(compareDate($(this).find('td:first').text().trim())) { $(this).hide(); } }); });

ce n’est pas difficile mais c’est un long chemin, j’essaie d’expliquer une partie de cela pour vous,

la première ligne est en-tête, nous ne voulons donc pas manipuler cela, ajoutez une classe aux lignes qui doivent éventuellement être masquées comme .datacheck

et ensuite, nous essayons de créer des trucs sympas avec chaque requête, nous allons vérifier chaque ligne une par une, obtenir la colonne de date et convertir celle-ci en un format de date comparable, puis décider d’afficher ou de masquer,

voici ce que je pense

 $('table tr.datacheck').each(function(){ var now = new Date().getTime(); var text_time = $(this).find('td').first().text(); var time = text_time.split('-'); // separate day,month,year var day = time[0]; var month = time[1]; var year = time[2]; var row_date = new Date(); row_date.setFullYear(year, month, day); // now we have both time, now time and row time , we can compare if (now > row_date.getTime() ) { // if the row date is less that now date $(this).hide(); // hide the row here } });

J’ai écrit ce code en mode désordonné pour faciliter la compréhension. J’espère que ça aide

voici un code court

 $('table tr.datacheck').each(function(){ var now = new Date().getTime(); var text = $(this).find('td:first').text().split('-'); var row_date = new Date(); row_date.setFullYear(time[0], time[1], time[2]); // now we have both time, now time and row time , we can compare if (now > row_date.getTime() ) { // if the row date is less that now date $(this).hide(); // hide the row here } });